React+Bootstrap5项目SassError: theme-color()调用无效报错咨询

报错根因 #

theme-color()是Bootstrap 5内置的SCSS工具函数，作用是从全局$theme-colors映射表中读取对应键名的颜色值，你当前报错的核心原因是调用该函数时，$theme-colors中还未定义对应primary/secondary键的有效值，和Bootstrap版本本身没有关系，不需要降级版本。

推荐修复方案 #

你可以优先选择覆盖$theme-colors配置的方式修复，操作更简单也不会破坏模板原有适配逻辑：

• 第一步：打开模板自定义变量文件，也就是引入配置中标注的scss/variables/variables文件，在文件最顶部补全所有用到的主题色配置：

$theme-colors: (
  "primary": #0074d9,
  "secondary": #6c757d,
  // 后续如果有其他主题色报错，直接在这个映射里补全对应键值即可
) !default;

• 第二步：如果补全后仍然报错，调整bootstrap-extended/include文件的引入顺序，确保Bootstrap原生变量加载在自定义变量之前，修改后顺序如下：

// Functions
@import 'bootstrap/scss/functions'; 
@import 'functions'; 

// Variables
@import 'bootstrap/scss/variables'; // 调整到自定义变量之前
@import 'scss/variables/variables'; 
@import 'variables'; 

// Mixins
@import 'bootstrap/scss/mixins'; 
@import 'mixins'; 

• 第三步：如果需要快速临时修复，直接在报错的palette-variables.scss文件最顶部加入以下配置，覆盖当前文件的颜色调用逻辑：

$custom-primary: #0074d9;
$custom-secondary: #6c757d;

// 重写当前文件用到的主题色映射
$theme-colors: map-merge(
  (
    "primary": $custom-primary,
    "secondary": $custom-secondary
  ),
  $theme-colors
);

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