相對於Scss更改Bootstrap4字體大小$ font-size-base

Question

我自定義Bootstrap4，但發現很難理解爲什麼事情不按預期工作。

導入原始_variables.scss並更改$font-size-base應該工作，否則我們需要將其更改爲14個變量（例如$h1-font-size: $font-size-base * 2.5）。並且在將來當我更新我的「node_modules> bootstrap」時，那麼我不必再檢查$ font-size-base是否已經被bootstrap團隊引用到任何新變量中。

我創建和新_custom-variable.scss和進口變量的原因：

@import '../node_modules/bootstrap/scss/variables'; 

，改變$font-size-base: 1rem到$font-size-base: 0.875rem;

這工作得很好，當我看到編譯CSS的body：

// ../node_modules/bootstrap/scss/_reboot.scss 
body { 
    ... 
    font-size: $font-size-base; 
    ... 
} 

// compiled css 
body { 
    ... 
    font-size: 0.875rem; 
    ... 
} 

但這是問題，它不適用於標題標籤：

// In my _custom-variable.scss, when I change $font-size-base from 1rem to 0.875 
// then I expect the values changed to: 
h1 { font-size: 2.1875rem } 
h2 { font-size: 1.75rem } 
... 
h6 { font-size: .875rem } 

// but nothing gets changed 
h1 { font-size: 2.5rem } 
h2 { font-size: 2rem } 
... 
h6 { font-size: 1rem } 

我不知道這個，但我覺得這是由於計算這裏：

//../node_modules/bootstrap/scss/_variables.scss 
$h1-font-size: $font-size-base * 2.5 !default; 
$h2-font-size: $font-size-base * 2 !default; 
... 
$h6-font-size: $font-size-base !default; 

Answer 1

正如你覆蓋$font-size-base變量在_custom-variable.scss你應該overwitre的$h1-font-size ，$h2-font-size等...變量也在_custom-variable.scss文件中。

標題大小在_variables.scss中定義，其中$font-size-base的值仍然是原始大小。一個scss變量會保留它的原始值，直到你將它覆蓋。

另一種選擇是在原始_variables.scss文件中進行自定義。也許將默認值留在註釋塊中。