如何通过Bootstrap 5 API在断点处修改字体大小（续问）

背景 #

此前参考过关于Bootstrap 5断点处修改字体大小的相关问题，实践时遇到以下问题：

遇到的问题 #

• 复制Bootstrap官方文档的API代码到文件时，出现map、逗号或分号相关语法错误，怀疑代码复制有误；
• Sass源文件未生成预期的响应式字体类，例如：

.fs-sm-n
.fs-md-n
.fs-lg-n
.fs-xl-n
.fs-xxl-n

（其中n为1-6的数字）

现有正常运行的Sass文件 #

1. global.scss #

@use "sass:map";

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

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




@import "./palette";
@import "./custom";
@import "./utilities";
@import "./components";


@import "../node_modules/bootstrap/scss/bootstrap.scss"

2. 自定义utilities.scss #

$utilities: (

  "height": map-merge(

    map-get($utilities, "height"),

    (
    
      values: map-merge(

        map-get(map-get($utilities, "height"), "values"),

        (300: 300px, 400: 400px, 600: 600px)

      )

    )

  )

)

疑问 #

需要从Bootstrap API代码片段中提取哪部分，放到哪个Sass文件？通常是否放在utilities.scss？若是，是否需调整该文件原有代码的标点（如添加分号）？

修改后的Bootstrap代码片段（将示例中的border替换为font-size） #

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

$utilities: map-merge(
  $utilities, (
    "font-size": map-merge(
      map-get($utilities, "font-size"),
      ( responsive: true ),
    ),
  )
);

内容的提问来源于stack exchange，提问作者Kamilia Gourbail