如何通过SASS变量自定义Bootstrap 5的fs-*类字体大小

Bootstrap 5的fs-*字体大小工具类由$font-sizes Sass映射表全局控制生成，无需逐个修改单一变量，直接调整该映射表即可完成自定义，具体操作方法如下：

• 全量重定义所有fs-*尺寸 #

如果需要修改全部档位的字体大小，直接在导入Bootstrap核心Sass文件之前重写$font-sizes映射表即可：

// 自定义$font-sizes映射表，必须写在导入Bootstrap之前
$font-sizes: (
  1: 3rem,
  2: 2.25rem,
  3: 1.875rem,
  4: 1.5rem,
  5: 1.125rem,
  6: 0.875rem
);

// 导入Bootstrap核心Sass文件
@import "node_modules/bootstrap/scss/bootstrap";

• 仅修改指定档位的尺寸 #

如果只需要调整个别fs-*的大小，不需要覆盖其他默认配置，可以使用Sass的map-merge方法合并自定义规则和默认规则：

// 先导入Bootstrap基础工具文件，获取默认$font-sizes配置
@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/mixins";

// 合并自定义配置到默认映射表中
$font-sizes: map-merge($font-sizes, (
  1: 3.25rem, // 仅修改fs-1的大小
  5: 1.2rem // 仅修改fs-5的大小
));

// 最后导入Bootstrap核心文件
@import "node_modules/bootstrap/scss/bootstrap";

• 新增自定义fs-*档位 #

如果需要官方默认没有提供的更小/更大的字体档位，直接在$font-sizes映射表中新增键值对即可，编译后会自动生成对应工具类：

$font-sizes: map-merge($font-sizes, (
  7: 0.75rem, // 新增fs-7类
  8: 0.625rem // 新增fs-8类
));

注意：所有自定义变量的声明必须放在导入Bootstrap核心Sass文件之前，否则覆盖逻辑不会生效。如果使用Bootstrap模块化导入方案，只需要保证变量覆盖的代码在utilities/text模块导入之前即可。

内容的提问来源于stack exchange，提问作者Jastria Rahmat