Question

我正在定制Bootstrap4，但很难理解为什么事情没有按预期工作。

导入原始的_variables.scss并更改$font-size-base应该工作，我们需要在14个变量中更改它（例如。$h1-font-size: $font-size-base * 2.5）。并且将来当我更新我的＆＃34; node_modules＆gt;引导＆＃34;那么我不必再检查引导团队是否在任何新变量中引用了$ font-size-base。

我创建了新的_custom-variable.scss并在其中导入了变量：

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

并将$font-size-base: 1rem更改为$font-size-base: 0.875rem;

当我看到body的编译css时，这很好用。

// ../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

当您覆盖 _custom-variable.scss 中的$font-size-base变量时，您应该覆盖$h1-font-size，$h2-font-size等...变量> _custom-variable.scss 文件。

标题大小在 _variables.scss 中定义，其中$font-size-base的值仍然是原始值。 scss变量将保持原始值，直到你覆盖它为止。

另一种选择是在原始 _variables.scss 文件中进行自定义。也许将默认值保留在注释块中。

相对于Scss $ font-size-base

1 个答案: