使用 Sass 自定义引导程序；我应该在我的 scss 文件中究竟在哪里导入引导程序？

Question

在尝试使用 Sass 自定义引导程序时，我注意到覆盖默认引导程序变量似乎以不连贯的方式工作，并且希望有人能解释导致这种行为的确切原因。

一些变量似乎只有在导入引导程序之前声明它们才会被覆盖，其他变量似乎只有在引导程序被导入之后定义才会被覆盖。我将分别展示一个示例。

变量 $form-range-thumb-width 和 $form-range-thumb-height 仅在使用我自己的值声明变量后导入引导程序时才被我提供的值覆盖，如下所示：

$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）。

此时，您会假设为了覆盖变量，您需要在导入引导程序之前执行此操作但是，使用 $font-family-base 之类的变量来描绘完全相反的行为。 在这种情况下，您需要在 scss 中导入引导程序后覆盖该变量，否则覆盖无效。

例如，这样可以正常工作并正确覆盖字体

@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

由于您没有在自定义项中引用任何现有变量，您只需在导入引导程序之前设置更改以覆盖!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