Bootstrap 5：变量覆盖不起作用

Question

我尝试用我自己的值覆盖一些默认变量。

为此，我使用了 Bootstrap 文档中的演示代码：

// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
@import "../bootstrap/scss/functions";

// 2. Include any default variable overrides here

// Default variable overrides
$body-bg: #000;
$body-color: #111;
$table-cell-vertical-align: middle;

// 3. Include remainder of required Bootstrap stylesheets
@import "../bootstrap/scss/variables";
@import "../bootstrap/scss/mixins";
@import "../bootstrap/scss/root";

// 4. Include any optional Bootstrap CSS as needed
@import "../bootstrap/scss/utilities";
@import "../bootstrap/scss/reboot";
@import "../bootstrap/scss/type";
@import "../bootstrap/scss/images";
@import "../bootstrap/scss/containers";
@import "../bootstrap/scss/grid";
@import "../bootstrap/scss/helpers";

// 5. Optionally include utilities API last to generate classes based on the Sass map in `_utililies.scss`
@import "../bootstrap/scss/utilities/api";

// 6. Add additional custom code here

覆盖适用于 $body-bg 和 $body-color。但是 $table-cell-vertical-align 中的更改没有效果。

我也看到一个answer which points out the importance of the order。但正如我所见，我文件中的顺序是正确的。

即使我把 $table-cell-vertical-align 放在文件末尾也不起作用。

我是不是漏掉了什么？

Answer 1

您似乎没有导入 ../bootstrap/scss/tables 文件。

Bootstrap 5：变量覆盖不起作用

Bootstrap 5: Variable overwrite doesn't work

css

sass

bootstrap-5

dart-sass