如何修改 Bootstrap 5 的字体大小以添加 FS-7 类

Question

我正在尝试添加；fs-7"；css类以引导5。

遵循本指南：https://getbootstrap.com/docs/5.0/utilities/api/#modify-公用事业

我想出了这个自定义scss文件：

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

$h7-font-size: $font-size-base * 0.75; // $font-size-base is defined in _variables.scss

$utilities: map-merge(
$utilities,
(
"font-size": map-merge(
map-get($utilities, "font-size"),
(
values: map-merge(
map-get(map-get($utilities, "font-size"), "values"),
(7: $h7-font-size),
),
),
),
)
);

但是当我调用css类"fs-7"；在我的代码中，它无法识别。

我做错什么了吗？

Answer 1

Ok找到了。事实证明，在调用引导文件之前，您需要定义变量$utilities。

所以这是有效的：

@import "../../../../../../node_modules/bootstrap/scss/functions";
@import "../../../../../../node_modules/bootstrap/scss/variables";
@import "../../../../../../node_modules/bootstrap/scss/utilities";

$h7-font-size: $font-size-base * 0.75;

$utilities: map-merge(
$utilities,
(
"font-size": map-merge(
map-get($utilities, "font-size"),
(
values: map-merge(
map-get(map-get($utilities, "font-size"), "values"),
(7: $h7-font-size),
),
),
),
)
);
@import '../../../../../../node_modules/bootstrap/scss/bootstrap';

Answer 2

您将在中找到Bootstrap变量的完整列表bootstrap/scss/_variables.css

复制和粘贴变量并修改其值。

$font-sizes: (
1: 2.25rem,
2: 1.875rem,
3: 1.5625rem,
4: 1.25rem,
5: 1.125rem,
6: 1.025rem,
7: 5rem,
);
@import '../node_modules/bootstrap/scss/bootstrap';

Answer 3

当我遇到类似的问题时，我所做的就是从bootstrap的官方网站下载bootstrap-utilities.css文件，并将其放在我项目的css子文件夹中。显然，我一直在使用无法识别的实用程序。

字体大小包含在这些实用程序中。