我自定义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;
在你的例子中,它的工作原理是显示font-weight而不是font-size-base – ztadic91
@ ztadic91谢谢你让我知道,这只是我的问题中的错字,我改变了它。 – Syed