css - 如何正确覆盖 Angular 库的变量

Question

我基本上是在使用 bootstrap 5 和 Angular 制作一个小型设计库。
我正在使用 boostrap 核心，为其添加一些扩展或自定义样式(以适合我的设计)。
基本上，我使用 Bootstrap 如下:
图书馆:
我的图书馆中有 2 个 scss:
设计库.core.scss

// Required to be imported for bootstrap
@import '~bootstrap/scss/functions';

// Library default variable that override bootstraps one
@import './variables'; 

设计库.extension.scss

// I need to import the variables or they are undefined 

@import './variables'
// some override of bootstrap style like 
.alert {
  background: $white;
}

元素:
现在，在我的元素中，我使用如下设计库:
元素.scss

// Import the default variable of the libraryu
@import '~/design-library.core';

// override the default with additional variables
@import './project-variables'

// import bootstrap
@import '~bootstrap';

// import the extension of bootstrap from the library
@import '~/design-library.extension'

这很好用，我遇到的问题是变量覆盖。
假设我把 $red: #f00作为库中的默认值。
然后，在我设置的元素变量中 $red: #e30000在我的库扩展中导入 variables ，我导入库之一(因为我当然不能导入元素之一......)。但是由于我从库中导入了一个(而不是覆盖一个)，所以我所有的 CSS 都将使用 $red: #f00 生成。 .我希望我的所有扩展 css 都使用覆盖变量，所以它应该是 $red: #e30000如何在它们被实现它们的元素覆盖后导入变量？
编辑:这足够清楚吗？ :X

Answer 1

听起来您想覆盖 design-library.extension.scss 中的一些变量.唯一的方法是导入另一个文件。

@import './variables'
@import './overrides'
// some override of bootstrap style like 
.alert {
  background: $white;
}

但是，听起来您希望这个文件以某种方式知道您已经覆盖了 project.scss 中的这些变量。文件。对不起，但这没有任何意义。
当您覆盖 project.scss 中的变量时它们没有被“元素覆盖”，它们只是在那个单个文件中被覆盖。为了让您的扩展知道这些覆盖，它需要导入 project.scss .
话虽如此，如果您计划将此库作为一个包发布，我不建议您尝试导入外部文件，这会使其非常脆弱。
如果这只是供个人使用，您可以导入您的 project-variables ./variables 之后的文件在 design-library.extension.scss .
我希望这能为你澄清事情。