Angular lib - 公开常见的 scss

Question

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

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

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

Answer 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.

Angular lib - 公开常见的 scss

Angular lib - expose common scss

angular

sass

lib