Angular lib - 公开常见的 scss

【问题标题】：Angular lib - expose common scssAngular lib - 公开常见的 scss
【发布时间】：2022-01-18 21:02:12
【问题描述】：

我正在尝试创建在我的 Angular 库中定义的常用样式包。我想在我未来的项目中使用我的 lib 中的 mixins、函数、变量等。

通常在这种情况下，我曾经使用 scss-bundle tool => https://www.npmjs.com/package/scss-bundle ，但据我所知，此解决方案已被 sass '@use' '@forward' 弃用，当我尝试运行 scss-bundle 时，我得到一个未知导入错误，因为在我的 index.scss 中我使用了“@forward”关键字。

还有其他解决方案吗，如何从 angular lib 中捆绑 scss 文件并直接移动到 dist 中？我知道，我可以通过 webpack、parcel 等来做到这一点，但我不想将它附加到我的 lib 依赖项中。有没有更多可配置的方法，直接来自 Angular，或者一些简单的 npm 工具，如 scss-bundle？

【问题讨论】：

标签： angular sass lib

【解决方案1】：

根据official documentation of ng-packagr，您现在可以指定要复制到包中的目录和/或文件。

{
  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../dist/my-component-library",
  "lib": {
    "entryFile": "src/index.ts"
  },
  "assets": [
    "./my-dir"
  ]
}

然后您可以将此目录引用为：@import ~my-library/my-dir。请记住，鉴于上述配置，my-dir 需要位于库的根目录。另一件要提的是ng-packagr 保留了树结构。例如，如果您有以下配置：

"assets": [
 "./dir1/dir2/my-dir"
]

然后在构建库之后，您需要像这样引用 my-dir： @import ~my-library/dir1/dir2/my-dir.

【讨论】：