Bootstrap SCSS转CSS报错：未定义变量$theme-colors-rgb

问题分析 #

第一个错误$theme-colors-rgb未定义，是因为_root.scss依赖该变量，而它由_maps.scss生成；导入_maps.scss后出现的$primary-text-emphasis-dark错误，是因为_maps.scss引用了仅在variables-dark.scss中定义的深色模式文本强调色变量。

解决方案 #

无需引入variables-dark.scss，只需在导入_maps.scss前手动定义缺失的深色模式变量，或覆盖相关映射表即可：

方法1：手动定义缺失的深色变量 #

在custom.scss中，调整导入顺序并添加变量定义：

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

// 定义缺失的深色模式文本强调色变量，复用浅色模式值或自定义
$primary-text-emphasis-dark: $primary-text-emphasis;
$secondary-text-emphasis-dark: $secondary-text-emphasis;
$success-text-emphasis-dark: $success-text-emphasis;
$info-text-emphasis-dark: $info-text-emphasis;
$warning-text-emphasis-dark: $warning-text-emphasis;
$danger-text-emphasis-dark: $danger-text-emphasis;
$light-text-emphasis-dark: $light-text-emphasis;
$dark-text-emphasis-dark: $dark-text-emphasis;

@import "../scss/bootstrap/mixins";
@import "../scss/bootstrap/maps";
@import "../scss/bootstrap/root";
// 其余需要的组件

方法2：覆盖主题文本强调色映射表 #

如果不需要深色模式的文本强调色配置，直接重新定义$theme-text-emphasis-colors映射表，移除对深色变量的引用：

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

// 重新定义文本强调色映射，仅保留浅色模式配置
$theme-text-emphasis-colors: (
  "primary": $primary-text-emphasis,
  "secondary": $secondary-text-emphasis,
  "success": $success-text-emphasis,
  "info": $info-text-emphasis,
  "warning": $warning-text-emphasis,
  "danger": $danger-text-emphasis,
  "light": $light-text-emphasis,
  "dark": $dark-text-emphasis
);

@import "../scss/bootstrap/mixins";
@import "../scss/bootstrap/maps";
@import "../scss/bootstrap/root";
// 其余需要的组件

验证编译 #

重新执行编译命令：

sass scss/custom.scss:css/bootstrap.min-new.css

这样既解决了变量未定义的报错，又不会因引入variables-dark.scss增大CSS体积。

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