修改Bootstrap主题色时SCSS报variable value expected如何修复？

你遇到的SCSS报错是因为映射（map）类型的变量语法使用错误：

• SCSS中定义map变量需要用()圆括号包裹键值对，你误用了CSS规则块的{}大括号，导致编译器无法识别为合法的变量值
• 额外注意：直接重写$theme-colors会覆盖Bootstrap默认的success、warning、danger等其他主题色配置，更推荐用map-merge方法扩展原有配置

方案1：仅修改主色（最简化） #

如果你只是需要修改primary主色，不需要手动调整$theme-colors，直接在引入Bootstrap前声明自定义的$primary变量即可，Bootstrap会自动同步到主题色配置中，代码如下：

// 自定义变量覆盖
$primary: #fd7e14;

// 引入Bootstrap
@import "./bootstrap/scss/bootstrap";

// 其他自定义代码

方案2：自定义主题色映射（需新增/修改多套主题色） #

如果你需要调整多组主题色，用正确的map语法配合map-merge扩展配置即可：

// 自定义变量覆盖
$primary: #fd7e14;
$custom-color: #123456;

// 扩展默认主题色配置，不会丢失原有默认颜色
$theme-colors: map-merge(
  $theme-colors,
  (
    "primary": $primary,
    "custom": $custom-color
  )
);

// 引入Bootstrap
@import "./bootstrap/scss/bootstrap";

// 其他自定义代码

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