引导4 SCSS将覆盖工作不

Question

因此，这里是从引导文档报价：

在引导4

每萨斯变量包括默认的标志，这意味着 您可以在自己的萨斯覆盖该默认值！即使在之后 原始变量已被定义。

下面是我的theme.scss文件内容：在不改变

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

一切编译OK，但是：

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

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

定制custom-variables.scss文件的内容（只测试）到样式（例如，主体颜色和基本字体系列保持与原始Bootstrap文件中的相同）。Howe come？

Answer 1

对于v4 alpha。问题是你需要在变量应用于所有的boostrap风格之前重写变量（目前你是这样做的）。在bootstrap/scss/bootstrap每个scss文件被导入，从他们的variables文件开始。在此之后，他们提供了一种钩子，用于在用于表格，按钮等之前覆盖变量。

引导程序4附带_custom.scss文件，以轻松覆盖/scss/_variables.scss中的默认变量。将相关行复制并粘贴到_custom.scss文件中，修改值并重新编译Sass以更改默认值。一定要从覆盖值中删除！default标志。 [Source]

的_custom.scss文件应位于你的bootstrap/scss/目录内。
注意：这是自v4测试版以来已弃用。

---

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