Bootstrap 5.2.3自定义颜色无法生成bg-*、text-*类问题求助

我正尝试为Bootstrap 5.2.3项目添加自定义颜色，但无法生成对应的bg-*或text-*工具类。

尝试Bootstrap 5.1解决方案无效 #

先试了GitHub上找到的Bootstrap 5.1方案，代码如下：

$starorange: #df711b;

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

$theme-colors: map-merge($theme-colors, $custom-theme-colors);
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
$utilities-colors: map-merge($utilities-colors, $theme-colors-rgb);
$utilities-text-colors: map-loop($utilities-colors, rgba-css-var, "$key", "text");
$utilities-bg-colors: map-loop($utilities-colors, rgba-css-var, "$key", "bg");

@import "bootstrap";

使用<div class="bg-starorange">text</div>完全没有效果，bg-starorange类并未生成。

遵循Bootstrap 5.2.3官方文档操作仍失败 #

查阅Bootstrap 5.2.3官方文档后，采用如下方式：

@import "variables.scss";
$custom-colors: (
   "purple": $purple
 );
    
 // Merge the maps
$theme-colors: map-merge($theme-colors, $custom-colors);
   
@import "~bootstrap/scss/bootstrap";

其中$purple变量来自提前导入的variables.scss文件，该文件仅包含颜色定义，无映射等内容。

但添加bg-purple类后，开发者工具中看不到该类，全局搜索整个项目也找不到"bg-purple"，请问哪里操作出错了？

内容的提问来源于stack exchange，提问作者R-b-n