相对于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文件中进行自定义。也许将默认值留在注释块中。