Bootstrap 4 SCSS覆盖不起作用

Question

所以这是来自 Bootstrap 文档的引用：

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

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

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

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

自定义custom-variables.scss文件的内容（仅供测试）：

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

一切都可以编译，但是样式没有变化（例如，主体颜色和基本字体系列与原始 Bootstrap 文件中的相同。怎么来？

Answer 1

对于 v4 alpha。 问题是您需要先覆盖变量，然后再将它们应用于所有 boostrap 样式（目前您在之后执行此操作）。在 bootstrap/scss/bootstrap 中，每个 scss 文件都会被导入，从它们的 variables 文件开始。在此之后，它们为您提供了一种钩子，可以在将变量用于表格、按钮等之前覆盖它们。

Bootstrap 4 附带一个 _custom.scss 文件，用于轻松覆盖 /scss/_variables.scss 中的默认变量。将相关行从那里复制并粘贴到 _custom.scss 文件中，修改值，然后重新编译您的 Sass 以更改我们的默认值。请务必从覆盖值中删除 !default 标志。 [Source]

_custom.scss 文件应位于您的bootstrap/scss/ 目录内。
注意：自 v4 beta 起已弃用。

---

对于 v4 beta 及更高版本。 Variable defaults 基本上可以反过来工作。带有!default 标志的变量将默认为该变量先前设置的值（如果有的话）。由于所有引导变量都有此标志，您可以在 bootstrap/scss/bootstrap 之前导入您的 custom-variables.scss;

$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;
}