Bootstrap SCSS覆盖$theme-colors后其余主题色丢失问题求助

问题原因 #

你当前的写法存在两处问题：

1. 直接对$theme-colors变量做全量赋值，而非修改单一项：SCSS中对已存在的Map类型变量直接赋值会完全覆盖原有值，Bootstrap默认的$theme-colors内置了primary、secondary、success、danger等多组预设色值，直接赋值后整个映射表仅保留你定义的primary一项，其余主题色全部失效。
2. 你贴出的代码中缺失了官方要求的前置引入步骤：没有提前引入Bootstrap的函数和变量文件，导致$theme-colors没有初始默认值可继承，进一步导致默认主题色全部丢失。

正确实现代码 #

// 第一步：先引入Bootstrap前置依赖文件，拿到默认配置和工具方法
@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables";

// 第二步：用map-merge合并自定义配置，仅修改需要覆盖的primary项，保留其余默认主题色
$theme-colors: map-merge(
  $theme-colors,
  (
    "primary": #D4AF37
  )
);

// 第三步：引入完整Bootstrap SCSS文件
@import "node_modules/bootstrap/scss/bootstrap";

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