覆盖Bootstrap变量

Question

Bootstrap文档中说明如下：

Bootstrap 4中的每个Sass变量都包含！default标志，使您可以在自己的Sass中覆盖变量的默认值，而无需修改Bootstrap的源代码。根据需要复制和粘贴变量，修改其值，然后删除！default标志。如果已经分配了变量，则不会使用Bootstrap中的默认值重新分配该变量。

这适用于颜色和其他颜色，例如：$primary: #ffffff;

但是，它不适用于带有默认标志的每个变量。有时它只是与！important标志一起使用，但这不是我想要的。有什么解决方法还是我缺少什么？

更新

我在custom.scss末尾导入了Bootstrap文件，因此顺序正确。这就是为什么我也感到困惑。 我找到了一个有趣的例子，这使_variables.scss更加困扰我：

$gray-900: #212529 !default;

$body-color: $gray-900 !default;

我无法更改颜色

$ body-color

直接。我必须使用！important标志来使其以这种方式工作。另一方面，

$ gray-900

正常工作。我可以从该变量更改颜色并删除！default标记，这将更改主体颜色，这是下一步的逻辑步骤。 我仍然得抓紧时间。

Answer 1

变量定义的顺序很重要，在导入Bootstrap Sass文件之前，需要定义变量的所有值。

来自Bootstrap docs：

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

// Bootstrap and its default variables
@import "node_modules/bootstrap/scss/bootstrap";

除此之外，我看不到任何不起作用的原因。但是您提到了重要的标志，并且您不能在Sass变量定义中使用它。也许您可以提供一个示例，说明您尝试覆盖的内容无法正常工作。