通过引用其他变量覆盖scss变量

Question

从技术上讲，这不是助推器，而是scss，但是Bootstrap是我遇到问题的上下文。我正在更改引导程序中某些值的默认值。一个特定的变量，我想引用另一个引导变量。

所以我有自己的文件：

@import "_variable.overrides.scss";
@import "bootstrap.scss";

我的_variable.overrides.scss看起来像这样：

$secondary: lighten($primary, 10%);

我不能这样做，因为$ primary是未定义的，因为我先导入了覆盖的scss。如果我首先导入boostrap.scss，它不会覆盖，因为覆盖必须在默认变量定义之前进行。

有什么办法可以通过引用另一个变量来覆盖一个变量？

Answer 1

基本上，这已在here和here之前得到解答。您需要首先 @导入要在自定义SCSS中引用的所有变量。

由于$primary位于_variables.scss中，因此您需要@import _variables.scss和_functions.scss（因为_variables.scss对此进行了引用）：

@import "bootstrap/functions";
@import "bootstrap/variables";

然后，作为explained in the docs，您的自定义变量将覆盖Bootstrap，因为所有的Bootstrap变量都使用!default标志，这意味着它们不会优先于导入的自定义变量 之前。因此整个SCSS看起来像（您可能需要编辑路径）：

@import "bootstrap/functions";
@import "bootstrap/variables";
@import "_variable.overrides.scss";
@import "bootstrap.scss";