Bootstrap5.3+React18自定义SCSS变量时出现Undefined mixin错误

问题原因 #

你直接复制了Bootstrap官方完整的_variables.scss文件，其中部分变量定义依赖Bootstrap内置的mixin（比如颜色对比、响应式相关的mixin），而这些mixin的定义在Bootstrap核心文件里，你的导入顺序是先加载自定义变量，再加载Bootstrap核心，导致解析变量时mixin还未定义，触发错误。

解决步骤 #

1. 精简自定义变量文件
   不需要复制完整的官方变量文件，只保留你需要修改覆盖的变量即可。Bootstrap会自动加载默认变量，你的自定义变量会在编译时替换默认值。
   示例自定义_variables.scss：

   // 仅保留需要修改的变量，比如字体、主题色等
   $font-family-sans-serif: "Montserrat", sans-serif;
   $primary: #2c3e50;
   $border-radius: 0.25rem;
   // 其他你需要调整的变量...
   

2. 调整导入顺序
   正确的SCSS导入顺序应该是：

   • 自定义全局样式（非变量相关）
   • 自定义变量文件
   • Bootstrap核心文件
   • 你的组件样式文件（Header、Sidebar等）

   修正后的App.scss：

   @font-face {
     font-family: Montserrat;
     src: url(../public/fonts/Montserrat/Montserrat-VariableFont_wght.ttf) format('truetype');
   }
   
   // 自定义全局样式
   .wrapper{
     padding-right:0px !important;
     padding-left: 0px !important;
     .row-wrapper{
       margin-left: 0px !important;
       margin-right: 0px !important;
     }
   }
   .text-xs {
     font-size: .7rem;
   }
   
   // 1. 先导入自定义变量（仅覆盖需要修改的部分）
   @import './_variables.scss';
   // 2. 导入Bootstrap核心，此时会用你的自定义变量替换默认值
   @import '../../node_modules/bootstrap/scss/bootstrap';
   // 3. 最后导入组件样式，可直接使用Bootstrap的变量、mixin和工具类
   @import './Header.scss';
   @import './Sidebar.scss';
   @import './Dashboard.scss';
   

额外说明 #

如果确实需要使用依赖Bootstrap mixin的变量定义（比如自定义颜色时用到@include color-contrast()），需要在自定义变量文件之前先导入Bootstrap的functions和mixins基础文件，但这种场景很少，优先推荐只覆盖必要变量的方案，更简洁不易出错。

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