自定义Bootstrap theme-colors后text-、bg-前缀类无法生效如何解决

Bootstrap 内置两套独立的颜色映射表，分别对应不同的类生成逻辑：

• $theme-colors 映射负责给组件类（btn-*、border-*、link-* 等）生成对应颜色样式，你已将自定义色合并到该映射中，因此这部分类可以正常生成
• $colors 映射负责给通用工具类（bg-*、text-* 等）提供颜色数据源，你没有将自定义色添加到该映射中，因此对应的背景、文字色类不会生成

调整 SCSS 配置，在导入 Bootstrap 内置变量后，同时将自定义颜色合并到 $colors 和 $theme-colors 两个映射中即可，修改后的完整代码如下：

// set variables
$primary: #8dc3a7;
$light: #b4d6c1;
$starorange: #df711b;

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

$custom-colors: (
  "starorange": $starorange,
);

// 同时合并到两套颜色映射
$colors: map-merge($colors, $custom-colors);
$theme-colors: map-merge($theme-colors, $custom-colors);

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

重新编译 SCSS 文件后，即可正常使用 text-starorange、bg-starorange 类。

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