如何覆盖 Angular 库 scss 变量？答案

【问题标题】：how to override Angular library scss variables?如何覆盖 Angular 库 scss 变量？
【发布时间】：2021-10-16 00:22:36
【问题描述】：

我在 Angular 12 中创建了一个库，并实现了几个组件，我想标准化样式颜色，所以我还实现了 scss 变量，我创建了一个 SCSS 文件：

lib\dinotable.scss
$primary-color: green;
$secondary-color: red;

但我也希望库使用者能够覆盖其消费应用程序中的颜色，我怎样才能让他们覆盖 dinotable.scss 中的变量？

你可以在这里找到图书馆： https://github.com/chr1soscl/dinolib，使用“npm run pack-dt”构建和打包库，消费者应用在这里：https://github.com/chr1soscl/dinolib-consumer

【问题讨论】：

【解决方案1】：

我建议制作一个单独的 SCSS 文件，可能称为 overrides.scss，消费者可以在其中自己覆盖变量。但是，您需要确保在默认 Angular SCSS之后导入了覆盖样式。这意味着，你可能会有类似的东西：

lib\global-variables.scss

$primary-color: green;
$secondary-color: red;

@import 'overrides.scss'

注意：SASS 正在弃用 @import 功能，并在未来将其更改为 @use。

【讨论】：

嗨克里斯蒂安，首先感谢您的重播，但我还是不太明白，globla-variables是我的lib文件夹下的一个scss文件，所以库的根文件夹，变量位于全局变量文件中，即使我创建了一个 overrides.scss 文件并将其导入全局变量中，库使用者如何访问 overrides.scss 以便他们可以用自己的颜色替换变量？
如果您确保在所有预定义变量下导入您的 overrides.scss 文件，您/消费者在您的 overrides.scss 文件中更改的变量将覆盖预定义变量，因为 CSS 是级联的。我希望这是有道理的。
嗨 Christian，我在我的库中创建了一个 overrides.scss 文件，并将其导入到文件末尾的 goblal-variables.scss 中，就像上面一样，我将我的库构建为一个 npm 包，然后我将它安装到我的消费者项目中，我创建了另一个 overrides.scss 文件（在消费者项目中）并将其添加到我的 angular.json 样式列表中，即使我在那里进行更改，包颜色也不会被覆盖:(，我在做什么出了什么问题？错过了一些步骤？
您好@ChrisoLopez，您找到解决方案了吗？我遇到了同样的问题
@CommonPeople 当我在库组件中明确设置颜色时，我无法覆盖颜色，因此我删除了库的 css 中的任何颜色设置，而是将颜色替换为使用项目中的引导 scss 颜色变量覆盖。

【解决方案2】：

我建议尝试在 TS 文件中设置变量，并让最终用户在一般配置中覆盖它。看看这个： access SASS values ($colors from variables.scss) in Typescript (Angular2 ionic2)

【讨论】：