Bootstrap 5添加自定义背景色工具类时遇Expected identifier错误

想要添加一个自定义背景色类，按照Bootstrap 5官方文档的添加工具类步骤编写了如下SCSS代码：

@import "./BOOTSTRAP-CSS/scss/functions";
@import "./BOOTSTRAP-CSS/scss/variables";
@import "./BOOTSTRAP-CSS/scss/variables-dark";
@import "./BOOTSTRAP-CSS/scss/maps";
@import "./BOOTSTRAP-CSS/scss/mixins";
@import "./BOOTSTRAP-CSS/scss/utilities";

$third: #226C77;

$utilities: map-merge(
    $utilities, 
    (
        "bg-third": (
            property: background-color,
            class: bg-third,
            values: $third
        )
));

@import "./BOOTSTRAP-CSS/scss/bootstrap.scss";
@import "bootstrap/scss/utilities/api";

但出现如下错误：

Error: Expected identifier.
  ┌──> static\CUSTOM\SCSS\BOOTSTRAP-CSS\scss\mixins\_utilities.scss
67│         .#{$property-class + $infix + $property-class-modifier} {
  │            ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 
  ╵
  ╷
1 │ .bg-third-#226C77
  │            ━ error in interpolated output
  ╵
  static\CUSTOM\SCSS\BOOTSTRAP-CSS\scss\mixins\_utilities.scss 67:12   generate-utility()
  static\CUSTOM\SCSS\BOOTSTRAP-CSS\scss\utilities\_api.scss 13:9       @content
  static\CUSTOM\SCSS\BOOTSTRAP-CSS\scss\mixins\_breakpoints.scss 68:5  media-breakpoint-up()
  static\CUSTOM\SCSS\BOOTSTRAP-CSS\scss\utilities\_api.scss 5:3        @import
  static\CUSTOM\SCSS\BOOTSTRAP-CSS\scss\bootstrap.scss 51:9            @import
  static\CUSTOM\SCSS\_new_utilities.scss 20:9                          @import
  static\CUSTOM\SCSS\custom.scss 7:9                                   root stylesheet

尝试将所有导入语句移至文件底部，但问题未解决，请问该如何修复这个错误？

错误核心是：当你直接给values传入十六进制颜色值时，Bootstrap工具类API会自动尝试把该值拼接到类名后，生成.bg-third-#226C77这种不符合CSS类名规则的选择器（类名不能包含#符号）。

提供两种修复方案：

方案一：用键值对定义values，指定类名后缀 #

将values设置为键值对，键作为类名后缀，值对应颜色，同时把class设置为Bootstrap默认的bg基础类，让API自动拼接后缀生成合法类名：

$utilities: map-merge(
    $utilities, 
    (
        "bg-third": (
            property: background-color,
            class: bg,
            values: (
                third: $third
            )
        )
));

此配置会生成预期的.bg-third类。

方案二：使用single-value简化单值工具类配置 #

如果只需要单个值的工具类，直接用single-value参数指定颜色，API会跳过值拼接逻辑，直接生成目标类：

$utilities: map-merge(
    $utilities, 
    (
        "bg-third": (
            property: background-color,
            class: bg-third,
            single-value: $third
        )
));

额外优化：修正导入顺序 #

不要重复导入bootstrap.scss和utilities/api，正确顺序应为：先导入Bootstrap基础依赖，修改$utilities映射，最后导入utilities/api（完整的bootstrap.scss已包含工具类逻辑，无需重复导入）。

调整后的完整代码示例：

@import "./BOOTSTRAP-CSS/scss/functions";
@import "./BOOTSTRAP-CSS/scss/variables";
@import "./BOOTSTRAP-CSS/scss/variables-dark";
@import "./BOOTSTRAP-CSS/scss/maps";
@import "./BOOTSTRAP-CSS/scss/mixins";
@import "./BOOTSTRAP-CSS/scss/utilities";

$third: #226C77;

$utilities: map-merge(
    $utilities, 
    (
        "bg-third": (
            property: background-color,
            class: bg,
            values: (
                third: $third
            )
        )
));

@import "./BOOTSTRAP-CSS/scss/utilities/api";

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