时间戳

首页 > 解决方案 > Bootstrap 5：变量覆盖不起作用

css - Bootstrap 5：变量覆盖不起作用

问题描述

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

为此，我使用了 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-bgand $body-color。但更改$table-cell-vertical-align没有任何效果。

我还看到了一个答案，它指出了订单的重要性。但正如我所见，我文件中的顺序是正确的。

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

我错过了什么吗？

标签： csssassbootstrap-5dart-sass

解决方案

看起来您不是在导入../bootstrap/scss/tables文件。

推荐阅读