使用 Sass 自定义引导程序；我到底应该在我的 scss 文件中的什么地方导入 bootstrap？

Question

在尝试使用 Sass 自定义 bootstrap 时，我注意到覆盖默认 bootstrap 变量似乎以一种不连贯的方式工作，并且希望有人能解释到底发生了什么这就是导致这种行为的原因。

某些变量似乎只有在导入 bootstrap 之前声明时才会被覆盖，其他变量似乎只有在导入 bootstrap 之后定义时才会被覆盖。我将分别展示一个例子。

变量 $form-range-thumb-width 和 $form-range-thumb-height 只被我提供的值覆盖，如果 bootstrap 在用我自己的值声明变量后被导入，就像这样:

$form-range-thumb-width: 2rem;
$form-range-thumb-height: 2rem;
@import '../node_modules/bootstrap/scss/bootstrap';

如果另一方面我这样做（在覆盖两个变量之前放置导入）：

@import '../node_modules/bootstrap/scss/bootstrap';
$form-range-thumb-width: 2rem;
$form-range-thumb-height: 2rem;

然后我使用的值无效，并且这两个变量在编译为常规 css.

时采用默认值（在本例中为 1rem）

在这一点上，您会假设为了覆盖一个变量，您需要在导入之前执行此操作 bootstrap 但是随后用 $font-family-base 之类的变量描述了完全相反的行为。在这种情况下，您需要在 scss 中导入 bootstrap 后覆盖变量，否则覆盖无效。

因此，例如，这会起作用并正确覆盖字体

@import '../node_modules/bootstrap/scss/bootstrap';
$font-family-base: 'Manrope';

但这不会。

$font-family-base: 'Manrope';
@import '../node_modules/bootstrap/scss/bootstrap';

在第二种情况下，字体系列将采用其默认值。

有谁能解释是什么导致了这种行为？

Answer 1

文档中有解释：https://getbootstrap.com/docs/5.0/customize/sass/#importing

由于您没有引用自定义中的任何现有变量，因此您只需要在导入 bootstrap 之前设置更改 以覆盖 !default变量...

$form-range-thumb-width: 2rem; $form-range-thumb-height: 2rem; $font-family-base: 'Manrope'; @import '../node_modules/bootstrap/scss/bootstrap';

此外，我无法重现 $font-family-base 中描述的问题。它按预期工作：https://codeply.com/p/Rqx2vICKCr

使用 Sass 自定义引导程序；我到底应该在我的 scss 文件中的什么地方导入 bootstrap？

customizing boostrap with Sass; where exactly should I import bootstrap in my scss file?

css

sass

bootstrap-5