自定义主题色后Bootstrap SASS默认主题色无法正常生效

问题原因 #

你直接对$theme-colors变量赋值的写法，会完全覆盖Bootstrap预设的默认主题色Map，导致原有primary、secondary、info等内置色值全部丢失，对应样式自然无法生成。

解决方案 #

使用Sass内置的map-merge方法，将自定义颜色合并到原有$theme-colors中即可，完整修改后的代码如下：

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

$action-blue: #165c7d;
$primary-blue: #1b365d;

// 合并自定义颜色到默认主题色Map，不会覆盖原有内置色值
$theme-colors: map-merge(
  $theme-colors,
  (
    "action-blue": $action-blue,
    "primary-blue": $primary-blue
  )
);

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

补充说明 #

如果你需要修改Bootstrap原有内置主题色的色值（比如替换默认的primary蓝色），直接在合并Map之前重新赋值对应变量即可，无需修改Map结构，示例如下：

// 替换原有primary色值
$primary: #ff0000;
// 再合并自定义颜色
$theme-colors: map-merge($theme-colors, (...));

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