时间戳

首页 > 解决方案 > 在 Angular 10 组件库中使用 scss mixins

angular - 在 Angular 10 组件库中使用 scss mixins

问题描述

例如，如果我有以下结构：

组件库 > src > lib

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

现在在样式文件夹中，我声明了一个styles.scss 文件和一个mixins 文件夹。

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

正在抛出错误。例如：

错误：未定义的混合。╷ 7 │ @include mixin-name; │ ^^^^^^^^^^^^^^^^^^^^^ ╵</p>

src\lib\button\button.component.scss 7:3 根样式表 发生未处理的异常：未定义的 mixin。╷ 7 │ @include 按钮重置；│ ^^^^^^^^^^^^^^^^^^^^^ ╵</p>

我需要配置什么来实现这一点，就好像我正在构建一个实际的角度应用程序一样？我读过该库的构建方式与实际应用程序不同。

有什么解决方案可以解决这个问题，还是我需要不同的方法来解决这个问题？例如，在我需要使用该 mixin 的任何地方，我都需要在每个组件中多次复制样式？

标签： angularscss-mixinsangular-library

解决方案

在特别是在github上挖掘之后。有人建议问题与角度或 cli 本身无关，而是与 ng-packagr 以及执行命令 ng build 时它捆绑文件的方式有关.....

从这个链接到 ng-packagr 复制资产，他们建议将以下内容添加到库的 ng-package.json 中：

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

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

ng-packagr 团队的情况要好得多，过去几天一直在努力想出一个工作脚本来尝试实现这一目标。

推荐阅读