自定义Webpack构建React项目时Bootstrap Utilities API报错

错误原因 #

你在扩展Bootstrap的width工具类时，直接用map-merge覆盖了整个width配置对象，丢失了原配置中的property（属性名）、class（类名前缀）等关键参数。这导致Bootstrap生成的CSS规则缺少属性名，出现了无效的: fit-content !important;代码，最终引发语法错误。

解决方案 #

1. 修正Utilities API配置 #

修改你的自定义工具类代码，确保只合并width的values部分，保留原配置的其他属性：

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

// 正确合并原有width的values，添加新的fit-content和max-content值
$utilities: map-merge(
  $utilities,
  (
    "width": (
      values: map-merge(
        map-get($utilities, "width").values,
        (
          fit: fit-content,
          max: max-content
        )
      )
    )
  )
);

@import "bootstrap/scss/utilities/api";

2. 调整样式导入顺序 #

避免重复导入Bootstrap导致的配置冲突，修改你的样式导入代码：

// 先导入自定义的工具类配置
@import "./scss/utilities/sizing";
// 按需导入Bootstrap组件（或完整Bootstrap，确保sizing文件中未重复导入）
@import "bootstrap/scss/bootstrap";

如果想更简洁，也可以把所有配置整合到一个文件中：

// 导入Bootstrap基础依赖
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";

// 扩展width工具类
$utilities: map-merge(
  $utilities,
  (
    "width": (
      values: map-merge(
        map-get($utilities, "width").values,
        (
          fit: fit-content,
          max: max-content
        )
      )
    )
  )
);

// 生成自定义工具类
@import "bootstrap/scss/utilities/api";

// 导入完整Bootstrap
@import "bootstrap/scss/bootstrap";

3. 保留Webpack配置 #

你的Webpack CSS配置是正常的，不需要移除postcss-loader和autoprefixer，它们负责处理CSS兼容性，不会引发当前错误。

效果验证 #

修正后，Bootstrap会生成符合规范的类名.w-fit和.w-max，对应的CSS规则为：

.w-fit {
  width: fit-content !important;
}
.w-max {
  width: max-content !important;
}

这样就不会再出现语法错误了。

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