在Bootstrap SCSS主题映射中使用变量报错：$color "color"非有效颜色

问题描述 #

在配置Bootstrap SCSS主题映射时触发错误，提示内容为：

$color "color" is not a color in Bootstrap

根据截图还原的SCSS代码如下：

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

$primary: #E67E22;
$secondary: #95A5A6;
$info: #3498DB;

$theme-colors: (
  "primary": $primary,
  "secondary": $secondary,
  "info": $info,
  "color": $color
);

错误原因 #

你在$theme-colors映射中添加的"color": $color项存在问题：$color变量未被定义为合法的颜色值，Bootstrap要求主题颜色映射里的每个值都必须是有效的颜色类型（比如十六进制值、RGB/RGBA、颜色关键字等），而当前$color要么未定义，要么定义内容不符合颜色格式。

解决办法 #

1. 移除无效主题色项
   如果不需要这个"color"主题色，直接删除对应行即可：

$theme-colors: (
  "primary": $primary,
  "secondary": $secondary,
  "info": $info
);

2. 定义合法的$color变量
   如果确实需要新增该主题色，先给$color赋值有效颜色值，再加入映射：

$color: #2C3E50;
$theme-colors: (
  "primary": $primary,
  "secondary": $secondary,
  "info": $info,
  "color": $color
);

3. 调整代码顺序
   确保自定义变量和主题映射代码放在Bootstrap导入语句之前，否则Bootstrap会优先加载默认配置，你的自定义设置不会生效：

// 先定义自定义变量与主题映射
$primary: #E67E22;
$secondary: #95A5A6;
$info: #3498DB;
$color: #2C3E50;

$theme-colors: (
  "primary": $primary,
  "secondary": $secondary,
  "info": $info,
  "color": $color
);

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

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