2017-06-12 78 views
0

我正在做一個教程來學習Bootstrap 4(alpha 6)。我需要從bootstrap自定義原始的css配置。我的custom.scss文件不考慮Bootstrap 4 Alpha 6

爲此,我已經修改了_custom.scss:

// Bootstrap overrides 
// 
// Copy variables from `_variables.scss` to this file to override 
default values 
// without modifying source files. 
$green:red; 

我然後重新編譯bootstrap.scss文件(我使用prepros),當我重新加載頁面,一切都沒有改變。當我查看生成的bootstrap.css文件時,顏色仍然是bootstrap主題的默認綠色。

當我直接修改_variables.scss文件時,它完美地工作。

在我bootstrap.scss文件_custom.scss文件_variables.scss後輸入:

// Core variables and mixins 
@import "variables"; 
@import "mixins"; 
@import "custom"; 

有沒有人對爲什麼這是行不通的線索?

+0

[Bootstrap使用SCSS'!default's](https://stackoverflow.com/questions/10643107/what-does-default-in-a-css-property-value-mean)設置變量。嘗試導入'custom' _before_'變量'。 – Blazemonger

+1

你可以發佈你的變量文件嗎? – dennispreston

+0

今天晚上我會更新我的帖子。但變量文件是由bootstrap提供的默認值,我沒有改變任何東西。 –

回答

0

好的,我找到了答案。

這是對薩斯如何工作的誤解。我認爲這些變量就像在java中:一個參考。但它不是這裏的情況在上海社會科學院所以你必須使用這樣的顏色也變重新定義組件:

$green:red; 

$brand-success:$green; 
0

我有同樣的問題,我_custom.scss並不似乎在編譯時被工作,但實際上它是一個非常簡單的修復程序。

複製_variables.scss內容並粘貼到_custom.scss文件中,並從整個文件中簡單地刪除所有!default;

$font-size-h1: 2.5rem !default;

$font-size-h1: 2.5rem;

將解決這個問題。