Angular lib - 公开常见的 scss
Angular lib - expose common scss
我正在尝试创建我的 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?
根据 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 库中定义的常用样式包。 我想在我未来的项目中使用我的库中的 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?
根据 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
.