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

Question

我正在尝试将"fs-7“css类添加到bootstrap5中。

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

我想出了这个自定义的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

好了找到了。在调用引导程序文件之前，您需要定义变量$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/scss/_variables.scss中找到bootstrap变量的完整列表

复制并粘贴变量并修改它们的值。

$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';