更改Bootstrap Material主題的顏色

我正在開發一個應用程序，我想在其中使用更深橙色的顏色樣式，並試圖從sass版本的文件中覆蓋某些變量，但是當我編譯它時它不會改變。另一件奇怪的事情是，當我使用sass版本時，默認的顏色是藍色/靛藍，但是當使用github repo中的預編譯css時，它使用藍綠色的顏色風格。我已經在我的app.scss文件下列更改Bootstrap Material主題的顏色

@import "vendor/bootstrap/_bootstrap"; 
@import "vendor/bootstrap-material/bootstrap-material-design"; 
@import "vendor/material/ripples";

我試圖加入，我想改變，比如鏈接顏色變量來覆蓋變量，但沒有運氣

@import "vendor/bootstrap/_bootstrap"; 
@import "vendor/bootstrap-material/bootstrap-material-design"; 
$link-color: $red !default; 
@import "vendor/material/ripples";

有誰知道如何改變主題的整體顏色風格？

來源

2016-05-05 Kenneth_H

問題可能在於SASS偏分量應該以下劃線開頭，否則文件將被編譯爲CSS文件。

由於vendor/bootstrap-material/bootstrap-material-design沒有以下劃線開頭，所以它可能被編譯到CSS中，而沒有考慮在@import之後定義的變量。

我還想提到，截至目前（直到下一個主要版本支持Bootstrap4），Bootstrap Material Design項目SASS文件會自動從LESS文件生成的。所以如果使用下劃線加前綴不會有幫助，那麼修改LESS文件和編譯CSS或生成SASS文件的運氣會更好。

來源

2016-05-11 17:01:22

-2

當更改Bootstrap樣式/主題時，我發現瀏覽器的Inspector非常有用。

在Firefox中：工具> Web開發者>督察
在Safari中：開發>顯示Web檢查

選擇頁面中的元素，它顯示了所有的CSS樣式是以分層順序應用於它（即正在正確應用的樣式，但被優先的另一種樣式覆蓋）。通常情況下，有些東西正在被我沒有意識到的元素所改變，或者被稱爲與我想象的不同。

來源

2016-05-05 15:52:02 whyeliah

爲了更改引導變量的默認值，您需要在實際導入引導部分之前定義它們 - 確保您將！default標誌應用於它，以便它不能被覆蓋。

來源

2016-05-05 22:12:00 kasperoo

更改Bootstrap Material主題的顏色

回答

相關問題