twitter-bootstrap - 相对于 Scss $font-size-base 更改 Bootstrap4 字体大小

Question

我正在定制 Bootstrap4，但发现很难理解为什么这些东西没有按预期工作。

导入原始 _variables.scss 并更改 $font-size-base 应该可以工作，否则我们需要在 14 个变量中更改它(例如 $h1-font-size: $font-尺寸基数 * 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;

当我看到为 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 文件中进行自定义。也许在评论 block 中保留默认值。