引導4自定義變量不會覆蓋

我有一個主要styles.scss這樣的：引導4自定義變量不會覆蓋

//@import "../components/bootstrap/scss/bootstrap"; 

// Core variables and mixins 
@import "../components/bootstrap/scss/functions"; 
@import "../components/bootstrap/scss/mixins"; 
@import "components/variables"; 
@import "../components/bootstrap/scss/variables";

我嘗試重寫成功變量在我components/variables這樣的：

$green: #71c835 !important;

但它不斷拾起引導的顏色variables.scss這是 $green: #28a745 !default;

要創建一個清晰鑑於我媒體鏈接試圖切換這兩個文件是這樣的順序：

// Core variables and mixins 
@import "../components/bootstrap/scss/functions"; 
@import "../components/bootstrap/scss/mixins"; 
@import "../components/bootstrap/scss/variables"; 
@import "components/variables";

這真的讓我瘋狂我怎麼可以簡單地重寫引導變量

來源

2017-10-12 Sreinieren

您是否嘗試過更改SCSS的加載順序？您最後可以加載包含重寫變量的文件。 –

你是什麼意思？ – Sreinieren

你在「components/bootstrap/scss/variables」之前導入了「components/variables」，所以我建議你可以改變導入這兩個文件的順序，以便最後導入帶有你的變量的文件。 –

$green: #71c835 !important;意味着設置綠色變量的值此十六進制代碼後跟重要的。

這並不意味着將綠色變量的值設置爲該十六進制代碼，並忽略後續嘗試更改該值。

您無法防止變量被更改。

您必須按正確的順序編寫代碼。

如果你想覆蓋../components/bootstrap/scss/variables從components/variables然後另一個之後導入components/variables。

來源

2017-10-12 13:02:30 Quentin

Allready嘗試過，但給了我相同的結果。 – Sreinieren

你也許有解決這個問題的其他想法嗎？ – Sreinieren

使用第一種情況，並刪除!default

..... 
@import "components/variables"; 
@import "../components/bootstrap/scss/variables";

複製粘貼要覆蓋和更改值的變量。並刪除!default屬性。再次編譯它。

!default屬性的工作方式與！important相反。所以它需要使用先前聲明的變量的值。所以刪除!default

!important; //總是贏。

!default; //如果var已經被賦值，取而代之。 - Reference

所以現在components/variables

$green: #71c835;

和../components/bootstrap/scss/variables

$green: #28a745;

來源

2017-10-27 05:20:22 Znaneswar

也許你創建override.scss，把下襬完成之後，你variables.scss

@import "../components/bootstrap/scss/variables.scss"; 
@import "custome/scss/override.scss";

代碼覆蓋。scss：

$green: #you_code;

來源

2017-10-27 14:10:11

引導4自定義變量不會覆蓋

回答

相關問題