Bootstrap5自定义$theme-colors未生成text/bg颜色类问题

向$theme-colors映射表中添加自定义颜色后，btn-、link-前缀的相关颜色类可正常生成，但text-、bg-前缀的文本、背景颜色类未正常生成。

原main.scss文件代码如下：

@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/utilities";
@import "../node_modules/bootstrap/scss/utilities/api";
//custom-API file
@import './abstract/api';

原_api.scss文件中的代码如下：

//custom-colors
$custom-theme-colors: (
"altdark": #314259,
'altsecondary' : #F579A0
);
$theme-colors : map-merge($theme-colors, $custom-theme-colors);

• 操作系统：Windows
• Bootstrap版本：5.2.0-beta1

导入顺序错误。Bootstrap的text-*、bg-*工具类是在导入scss/utilities/api模块时，基于当前已存在的$theme-colors映射表直接生成的。你的自定义颜色合并逻辑写在utilities/api导入之后，工具类生成时还未读取到你新增的自定义色值，自然不会生成对应前缀的样式类。
btn-*、link-*类能正常生成，是因为这两类组件样式的生成逻辑在你当前的导入列表之后才被加载，读取到了你修改后的$theme-colors。

调整SCSS文件的导入顺序，所有对Bootstrap默认变量、映射表的修改，必须放在依赖这些内容的模块导入之前完成。

调整后的main.scss参考代码如下：

// 第一步：导入Bootstrap基础依赖
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";

// 第二步：合并自定义主题色，在工具类、组件导入前完成修改
$custom-theme-colors: (
  "altdark": #314259,
  "altsecondary": #F579A0
);
$theme-colors: map-merge($theme-colors, $custom-theme-colors);

// 第三步：导入工具类、组件等剩余Bootstrap模块
@import "../node_modules/bootstrap/scss/utilities";
@import "../node_modules/bootstrap/scss/utilities/api";
// 其他需要引入的Bootstrap组件、核心样式文件统一放在这之后

如果要保留单独的_api.scss文件存放自定义配置，只需要把这个文件的导入语句移动到utilities/api导入之前即可。

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