引导4 SCSS覆盖无法工作的

Question

这里引用了Bootstrap文档中的一句话：

Bootstrap 4中的每个Sass变量都包含！默认标志，这意味着您可以在自己的Sass 中覆盖该默认值，即使在定义了原始变量的之后也是如此。

下面是我的theme.scss文件内容：

// Bootstrap original
@import "bootstrap/scss/bootstrap";

// Variables overrides
@import "custom-variables";

自定义custom-variables.scss文件的内容(仅用于测试)：

$body-color: #555;
$font-family-base: serif;

所有的编译都是OK的，但是没有改变样式(例如，体色和基本字体系列与原始引导文件中的字体相同)。怎么来的？

Answer 1

For v4 alpha。的问题是，在将变量应用于所有引导样式之前，您需要重写它们(目前您是在之后这样做)。在bootstrap/scss/bootstrap中，每个scss文件都会被导入，从它们的variables文件开始。在此之后，它们为您提供了一种钩子，可以在变量用于表、按钮等之前覆盖它们。

引导4附带了一个_custom.scss文件，以便轻松重写/scss/_variables.scss中的默认变量。复制并粘贴相关行到_custom.scss文件中，修改值，并重新编译Sass以更改默认值。确保从重写值中移除！默认标志。[来源]

_custom.scss文件应该位于bootstrap/scss/目录中。

注意:这是不推荐的，因为v4测试版。

For v4 beta和更高版本。 变量默认值基本上是相反的。带有!default标志的变量将默认为此变量以前设置的值(如果有可用的话)。由于所有引导变量都有此标志，所以可以在custom-variables.scss之前导入bootstrap/scss/bootstrap；

$var: 2px; /* set in custom-variables.scss */
$var: 1px !default; /* set in the bootstrap _variables.scss */

.element {
  width: $var;
}

编译成

.element {
  width: 2px;
}

在重写这些变量时使用引导变量的一种方法是两次导入_variables.scss文件；一次是在定义重写之前作为单个文件导入，一次是作为整个引导过程的一部分：

// @import bootstrap _variables.scss file
$var: 1px !default;
$var2: 4px !default;

// your custom-variables.scss
$var: 2px + $var2;

// @import bootstrap
$var: 1px !default;
$var2: 4px !default;

.element {
  width: $var;
}

编译成

.element {
  width: 6px;
}