Bootstrap 5自定义Sass未将灰色编译为工具类问题求助

以下是针对灰色工具类未生成问题的排查和解决方案：

1. 修正变量加载顺序 #

Bootstrap的变量均带有!default标识，只有变量未被定义时才会使用默认值。如果你的$grays自定义代码是在导入Bootstrap核心SCSS之后写的，定义不会生效。必须把$grays的自定义代码放在导入Bootstrap的代码之前：

// 先自定义$grays
$grays: (
  "100": $gray-100,
  "200": $gray-200,
  "300": $gray-300,
  "400": $gray-400,
  "500": $gray-500,
  "600": $gray-600,
  "700": $gray-700,
  "800": $gray-800,
  "900": $gray-900
) !default;

// 再导入Bootstrap
@import "bootstrap/scss/bootstrap";

2. 确认工具类命名规则 #

Bootstrap默认的$grays键名不带gray-前缀，生成的灰色文本类是.text-100、.text-200这类，而非.text-gray-100。如果期望生成带前缀的类，需要修改$grays的键名：

$grays: (
  "gray-100": $gray-100,
  "gray-200": $gray-200,
  "gray-300": $gray-300,
  // ... 其他灰色项
) !default;

3. 验证map-merge-multiple函数的正确性 #

确保你使用的map-merge-multiple函数能正确合并所有传入的颜色映射。如果是自定义函数，检查其实现是否存在逻辑错误（比如忽略第一个参数$grays）。标准的多map合并函数实现应为：

@function map-merge-multiple($maps...) {
  $merged-map: ();
  @each $map in $maps {
    $merged-map: map-merge($merged-map, $map);
  }
  @return $merged-map;
}

4. 单独合并灰色映射排查问题 #

暂时绕过$all-colors，直接将$grays合并到工具类配置中，排除多map合并的干扰：

$utilities: map-merge(
  $utilities,
  (
    "color": map-merge(
      map-get($utilities, "color"),
      (
        values: map-merge(
          map-get(map-get($utilities, "color"), "values"),
          $grays
        ),
      ),
    ),
    "background-color": map-merge(
      map-get($utilities, "background-color"),
      (
        values: map-merge(
          map-get(map-get($utilities, "background-color"), "values"),
          $grays
        ),
      ),
    ),
    "font-size": (
        property: font-size,
        class: display,
        values: $display-font-custom
    )
  )
);

如果这样能生成灰色工具类，说明问题出在map-merge-multiple函数或$all-colors的合并逻辑上。

5. 检查工具类启用状态 #

再次确认没有配置禁用color/background-color工具类的选项，比如是否设置了$enable-color-utilities: false这类控制开关（部分Bootstrap版本有类似变量）。

内容的提问来源于stack exchange，提问作者Mark Hill