使用Sass 3自定义Bootstrap 5主题色报Invalid CSS value错误如何解决

问题原因 #

• Sass版本不兼容：Bootstrap 5.1.0要求使用Dart Sass 1.43.0及以上版本，你使用的Sass 3属于已停止维护的LibSass版本，不支持Bootstrap 5用到的map-loop等新Sass语法特性，这是报错的核心原因。
• 变量覆盖顺序错误：Bootstrap所有默认变量都带有!default标记，自定义变量必须写在导入Bootstrap相关文件之前才能覆盖默认值，你当前先导入variables文件再定义$theme-colors的写法无法正确触发覆盖逻辑。
• 主题色赋值逻辑问题：直接给$theme-colors赋值会覆盖整个默认色值映射表，丢失secondary、success等其他默认主题色，仅修改单个色值建议用map-merge合并自定义配置和默认映射表。

修复步骤 #

1. 升级Sass版本 #

卸载旧版本Sass 3，安装符合要求的Dart Sass：

# 卸载旧版本
npm uninstall node-sass sass
# 安装Dart Sass
npm install sass --save-dev

2. 调整SCSS文件写法 #

调整变量定义顺序，按需求修改主题色：

仅修改单个/部分主题色，保留其他默认色

// 先导入Bootstrap函数文件，支持后续映射表操作
@import "../../node_modules/bootstrap/scss/functions";

// 合并自定义色值和默认主题色映射表
$theme-colors: map-merge(
  $theme-colors,
  (
    "primary": #你的自定义色值, // 示例：#1890ff
  )
);

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

完全重写所有主题色，不需要默认色

// 直接在导入Bootstrap前定义完整的主题色映射表
$theme-colors: (
  "primary": #你的自定义主色,
  "secondary": #你的自定义辅助色,
  // 按需添加其他色值
);

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

调整完成后重新执行编译命令即可正常生成CSS文件。

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