React+SCSS项目全局@mixin无法调用但CSS变量生效如何解决

问题原因 #

首先明确两类语法的生效阶段差异：

• CSS变量（--xxx格式）是浏览器原生支持的运行时特性，只要你把定义了变量的全局样式导入到应用中，所有组件样式都能读取到全局变量，所以可以正常生效。
• SCSS的@mixin、$变量、@function都属于预编译语法，只在Sass编译成CSS的阶段生效，每个SCSS文件是独立完成编译的，你在App.jsx或者子组件jsx里导入全局SCSS，只是让打包工具把全局样式的输出结果加入最终样式表，不会把mixin定义注入到其他SCSS文件的编译上下文里，所以SupplierCard.scss编译时找不到对应的mixin定义，就会抛出报错。

解决方案 #

方案1：手动在用到全局mixin的SCSS文件头部导入全局文件 #

在SupplierCard.scss的最开头添加导入语句，注意写对相对路径：

// 路径根据你的实际项目结构调整
@import '../../css/Global.scss';

.supplierCard {
  @include card-secondary;
}

如果不想每次写冗长的相对路径，可以给Sass配置全局搜索路径：

• 如果是Vite项目，在vite.config.js中添加配置：

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        includePaths: [path.resolve(__dirname, 'src/css')]
      }
    }
  }
})

• 如果是Webpack项目，在webpack配置的sass-loader选项中添加includePaths配置即可。
  配置完成后可以直接写@import 'Global.scss'，不需要写相对路径。

方案2：全局自动注入（适合全局mixin/变量使用频率高的场景） #

可以通过打包工具配置，把全局SCSS文件自动注入到所有SCSS文件的编译头部，不需要手动导入：

• Vite项目可以修改上面的preprocessorOptions配置，把includePaths替换为additionalData: @import "Global.scss";``
• Webpack/CRA项目可以在sass-loader的options中添加additionalData配置，CRA未弹射的情况下可以用craco工具修改该配置。

方案3：使用Sass模块系统（推荐） #

如果你的Sass版本支持最新的模块系统，可以用@use替代@import避免全局命名冲突：

@use '../../css/Global.scss' as global;

.supplierCard {
  @include global.card-secondary;
}

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