如何覆盖 Angular 库 scss 变量？

Question

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

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

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

你可以在这里找到图书馆： https://github.com/chr1soscl/dinolib, use "npm run pack-dt" to build and pack the library, the consumer application is here: https://github.com/chr1soscl/dinolib-consumer

Answer 1

我建议改为尝试在 TS 文件中设置变量，并让最终用户在常规配置中覆盖它。看看这个：

Answer 2

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

lib\global-variables.scss

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

@import 'overrides.scss'

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

how to override Angular library scss variables?