在angular 10组件库中使用scss mixins



例如,如果我有以下结构:

组件库比;src祝辞自由

在lib文件夹中我有一个样式文件夹和一个按钮组件文件夹

现在,在样式文件夹中,我已经声明了一个样式。SCSS文件和mixins文件夹。

在mixins文件夹中,我声明了一些mixins,然后导入到按钮组件以及其他组件中使用,但我现在面临的问题是,每次我运行ng-build来构建lib。

抛出错误。例如:

ERROR: Undefined mixin。╷││@include mixin-name;│ ^^^^^^^^^^^^^^^^^^^^^╵

srclibbuttonbutton.component.scss 7:3 root stylesheet发生了一个未处理的异常:╷│@include button-reset;│ ^^^^^^^^^^^^^^^^^^^^^╵

如果我正在构建一个实际的angular应用程序,我需要配置什么来实现这一点?我读到库与实际应用程序的构建方式不同。

有解决方案来解决这个问题吗?还是我需要一个不同的方法来解决这个问题?例如,当我需要使用mixin时,我需要在每个组件中多次复制样式?

在github上深入研究后。有人建议,问题与angular或cli本身无关,而是与ng-packagr以及当你执行ng build.....

命令时它捆绑文件的方式有关。从这个链接到ng-packagr copy assets,他们建议在库的ng-package.json中添加以下内容:

{
"$schema": ".....",
"dest": "......",
"assets": "src/lib/assets/styles/mixins/<filename>.theme.scss"
}

这样我仍然可以在组件中使用和导入mixins。以上将成功解决错误并成功构建。

ng-packagr团队做得好得多,花了几天时间试图想出一个工作脚本来尝试实现这一点。

最新更新