Bootstrap SASS - 覆盖主题颜色

Question

我正在使用 Bootstrap 4.6 SASS 文件，并覆盖了一些默认值。 我正在按照此处显示示例的说明进行操作：

// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// Your variable overrides
$body-bg: #000;
$body-color: #111;

// Bootstrap and its default variables

// Optional
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// etc

此特定示例有效，因为在导入下面的“可选”导入之前不会使用$body-bg变量。

但是，我想更改用作主要主题的蓝色阴影。 如果我尝试通过定义$blue: #1122ff; 在标记为“您的变量覆盖”的部分中，它没有明显的影响。 那是因为“变量”导入定义了$blue的默认值以及从它派生的一系列其他变量（如$primary ）。 由于该文件是在“您的变量覆盖”部分上方导入的，因此重新定义变量为时已晚。

我可以简单地将我的变量定义向上移动（在变量导入之前），这有效，但它不仅与提供的示例不同，文档似乎专门排除了这一点：

变量覆盖必须在我们的函数、变量和 mixin 导入之后，但在其余导入之前。

我糊涂了。 在变量导入之前定义变量似乎是合乎逻辑的，否则该文件中使用!default定义的变量有什么意义？

文档是错误的，还是我遗漏了什么？ 如果我在文件顶部声明$blue会不会有令人不快的副作用？

Answer 1

使您定义的那些变量“！重要”。 它将覆盖变量定义。

// Your variable overrides
$body-bg: #000 !important;
$body-color: #111 !important;