Bootstrap SASS - 覆盖主题颜色

Question

我使用的是 Bootstrap 4.6 SASS 文件，并覆盖了一些默认值。我按照说明here 显示了一个示例：

// 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;