相对于 Scss $font-size-base 更改 Bootstrap 4 字体大小

Question

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

导入原始 _variables.scss 并更改 $font-size-base 应该可以工作，否则我们需要在 14 个变量中更改它（例如 $h1-font-size: $font-size-base * 2.5）。以后当我更新我的“node_modules > bootstrap”时，我不必再次检查引导团队是否在任何新变量中引用了 $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 变量时，您应该覆盖 _custom-variable.scss 中的 $h1-font-size、$h2-font-size 等变量 文件。

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

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