了解 Bootstrap 5 变量导入顺序覆盖

Question

我不明白以下情况。我的

app.scss

中有这样的 SCSS 变量导入顺序

@import '~/node_modules/bootstrap/scss/functions';
@import '~/node_modules/bootstrap/scss/variables';
@import '~/node_modules/bootstrap/scss/mixins.scss';

@import 'variables'; // overrides

@import '~/node_modules/bootstrap/scss/bootstrap';

根据 Bootstrap 文档，这应该是正确的导入顺序，以适当地覆盖 Bootstrap 变量。 在我的变量中，我有以下 CSS：

$font-size-base: 0.8rem;
$font-weight-medium: 500;
$font-weight-semi-bold: 600;

$h1-font-size: $font-size-base * 2.6;
$h4-font-size: $font-size-base * 1.2;
$h5-font-size: $font-size-base * 1.1;

但是有件事让我感到困惑。正如您所看到的

$font-size-base: 0.8rem;

是一个覆盖，但由于某种原因，Bootstrap 的默认变量不会选择它。当我想为 Bootstrap 的默认变量应用新的 font-size-base 时，我还需要在这里专门导入它们，如下所示：

$h3-font-size: $font-size-base * 1.75;

谁能告诉我这是为什么？我不想导入

$h3-font-size

，因为乘数没有更改为默认值，我只是希望 Bootstrap 在默认值中选择新的

$font-size-base

。

Answer 1

问题：

Bootstrap 不会获取您的 SCSS 覆盖，例如

$font-size-base: 0.8rem;

，因此您必须手动重新定义变量，例如

$h3-font-size

。

原因：

发生这种情况是因为您的覆盖是在 Bootstrap 的默认变量之后导入的，因此默认值已经设置。

解决方案：

您必须根据

Bootstrap 的文档在导入 Bootstrap 的变量和混合之前插入您的覆盖。

app.scss

中的正确进口订单：

// Import Bootstrap's functions first
@import '~/node_modules/bootstrap/scss/functions';

// Override Bootstrap variables here (in your custom 'variables' file)
@import 'variables';

/*
The following variable overrides are as mentioned by you, defined in the 'variables' file:


$font-size-base: 0.8rem;
$font-weight-medium: 500;
$font-weight-semi-bold: 600;

$h1-font-size: $font-size-base * 2.6;
$h4-font-size: $font-size-base * 1.2;
$h5-font-size: $font-size-base * 1.1;
*/

// Import Bootstrap’s variables and mixins
@import '~/node_modules/bootstrap/scss/variables';
@import '~/node_modules/bootstrap/scss/mixins';

// Finally, import Bootstrap’s main styles
@import '~/node_modules/bootstrap/scss/bootstrap';

为什么有效：

由于 Bootstrap 使用

!default

标志作为其变量，因此在导入 Bootstrap 的

$font-size-base

之前编写的自定义覆盖（例如

variables.scss

）将优先于默认值。