Bootstrap4SCSS覆盖不起作用

所以这是来自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文件中的相同.来吧？

对于v4 alpha.问题是你需要在变量应用于所有的boostrap样式之前覆盖它们(之后你会这样做).在bootstrap/scss/bootstrap每个scss文件中都会导入,从variables文件开始.在此之后,它们提供了一种钩子,您可以在将变量用于表格,按钮等之前覆盖它们.

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

该_custom.scss文件应位于bootstrap/scss/目录内.
注意:自v4 beta以来,这已被弃用.

适用于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;
}