Bootstrap 5自定义SASS非主题色变量$blue等不生效问题咨询

• Bootstrap默认只会为$theme-colors映射中包含的色值生成bg-*、text-*、border-*等工具类
• $primary、$secondary默认属于$theme-colors的内置键，修改变量值后会自动同步到主题色映射，对应工具类可直接生效
• $blue、$teal这类属于Bootstrap的基础色变量，默认没有加入$theme-colors映射，因此即便修改了变量值，也不会自动生成对应的bg-blue这类工具类

调整你的SASS文件配置，在导入Bootstrap变量文件后、导入主文件前，把需要生成工具类的自定义色值加入$theme-colors映射即可，正确配置示例如下：

// 自定义变量覆盖 必须放在导入Bootstrap文件之前
$primary: #D91473;
$secondary: #2E3092;
$blue: #349DD6;
$teal: #309C9E;

// 导入Bootstrap基础依赖
@import '../../node_modules/bootstrap/scss/functions';
@import '../../node_modules/bootstrap/scss/variables';

// 自定义修改主题色映射，新增需要的色值
$theme-colors: map-merge(
  $theme-colors,
  (
    "blue": $blue,
    "teal": $teal,
    // 其他需要生成工具类的色值都可以按格式加在这里
  )
);

// 导入Bootstrap主文件
@import '../../node_modules/bootstrap/scss/bootstrap';

修改完成后重新编译SASS，页面中的bg-blue类即可正常生效。

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