更改Bootstrap材質主題的顏色

Question

我正在開發一個應用程序，該應用程序要使用更深橙色的顏色樣式，並嘗試覆蓋sass版本的文件中的某些變量，但是當我使用gulp進行編譯時，它不會改變。 另一件事很奇怪，就是當我使用sass版本時，默認顏色是blue / indigo，但是當只使用github repo中的預編譯css時，它使用了深青色顏色樣式。 我的app.scss文件中包含以下內容

@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";

有誰知道如何更改主題的整體顏色樣式？

Answer 1

為了更改Bootstrap變量的默認值，您需要在實際導入引導程序部分之前對其進行定義-確保對它應用！default標志，以使其無法被覆蓋。

Answer 2

問題可能是SASS局部詞應該以下划線開頭，否則該文件將被編譯為CSS文件。

由於vendor/bootstrap-material/bootstrap-material-design並非以下划線開頭，因此可能會將其編譯為CSS，而不會考慮@import之后定義的變量。

我還想提到一下，到目前為止（ 直到下一個支持Bootstrap4的主要版本發布 ）， Bootstrap Material Design項目的sass文件都是從LESS文件自動生成的。 因此，如果在下划線前添加前綴沒有幫助，那么最好修改LESS文件並編譯CSS或生成SASS文件。

Answer 3

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

• 在Firefox中： 工具> Web開發人員>檢查器
• 在Safari中：“ 開發”>“顯示Web檢查器”

在頁面中選擇一個元素，它會顯示所有按層次結構順序應用到它的CSS樣式（即正確應用的樣式，但被其他優先的樣式覆蓋）。 通常，某些事情會被我沒有意識到的元素修改，或者被稱為與我想像的有所不同。