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

Question

从技术上讲，这不是boostrap的事情，而是scss的事情，但Bootstrap是我遇到问题的背景。我正在更改bootstrap中某些值的默认值。一个特定的变量，我想引用另一个引导变量。

所以我有我自己的文件：

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

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

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

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

有没有办法通过引用一个变量来覆盖另一个变量？

Answer 1

基本上，在here和here之前，这个问题已经得到了回答。您需要首先@import要在自定义SCSS中引用的任何变量。

由于$primary位于_variables.scss中，您需要@import _variables.scss和_functions.scss (因为这是由_variables.scss引用的)：

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

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

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