引導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; 
}