Bootstrap Sass添加自定义颜色至主题映射后，背景/文本类不生效排查

你的核心问题是导入顺序错误，导致自定义变量没能在Bootstrap编译工具类时生效：

1. 当前app.scss先导入了完整的Bootstrap，这时候Bootstrap已经根据默认的$theme-colors生成了所有.text-*、.bg-*这类工具类。之后导入的custom.scss里的变量修改，对已经生成的工具类没有任何影响。
2. 重复导入Bootstrap完全没必要，还会导致样式冗余。

另外，你手动重新定义$utilities-text、$utilities-bg等变量的操作是多余的，Bootstrap 5会自动基于$theme-colors生成对应的文本、背景、边框工具类，只要在编译Bootstrap前正确修改$theme-colors即可。

修正后的代码 #

app.scss #

// 先导入自定义变量文件，让变量在Bootstrap编译前生效
@import "custom";
// 只需要导入一次Bootstrap核心
@import "~bootstrap/scss/bootstrap";

custom.scss #

// 先定义自定义主题颜色
$custom-theme-colors: (
    "mycolor": #006A4E
);

// 合并到默认的theme-colors映射中
$theme-colors: map-merge($theme-colors, $custom-theme-colors);

这样修改后，Bootstrap在编译时会使用包含mycolor的$theme-colors，自动生成.btn-mycolor、.bg-mycolor、.text-mycolor、.border-mycolor等所有对应的工具类。

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