已eject的React17 create-react-app CSS Module全局SCSS变量配置

核心思路是通过sass-loader的内置能力，在所有SCSS文件编译阶段自动注入全局变量文件的引用，完全避免逐文件手动导入的繁琐操作，同时不会影响CSS Module的原有隔离特性。

前置准备 #

• 移除全局颜色文件的.module后缀，改回普通SCSS文件（比如放在src/styles/colors.scss路径下），文件内仅存放SCSS变量、mixin、函数这类编译时内容，不要写会被输出为实际CSS的选择器、样式规则。
• 修正示例代码里的语法错误：
  • 变量名和值之间不要留空格，正确写法是$white: #ffffff;
  • 导入路径里的路径标识和路径内容之间不要留多余空格。

核心配置修改 #

找到config/webpack.config.js中处理SCSS文件的sass-loader配置块（CRA默认配置里，处理普通SCSS和SCSS Module的规则会共用同一套sass-loader配置），在配置项中新增additionalData字段。

注意：早年网上流传的旧方案提到的prependData配置在sass-loader v10+版本已经被废弃，CRA17默认安装的sass-loader为13.x版本，使用旧字段配置不会生效，这是抄旧方案最常见的踩坑点。

修改后的sass-loader配置示例：

// 顶部如果还没引入path模块，先加上
const path = require('path');

// 找到原来的sass-loader配置项
{
  loader: require.resolve('sass-loader'),
  options: {
    sourceMap: true,
    // 新增：所有SCSS文件编译前自动注入全局变量文件的引用
    additionalData: `@import "${path.resolve(__dirname, '../src/styles/colors.scss')}";`
  }
}

验证使用 #

配置完成后重启本地开发服务，你可以直接在任意SCSS Module文件（比如index.module.scss）里直接使用$white变量，不需要再手动写@import语句引入颜色文件，编译不会抛出变量未定义的错误。

注意事项 #

• 全局注入的文件绝对不要写实际的CSS样式规则，否则每一个SCSS文件编译时都会重复注入这段内容，最终会造成打包后的CSS体积冗余。
• 不需要给全局变量文件加任何.module标识，该文件不会作为CSS Module被单独打包，仅在编译阶段为所有SCSS文件提供变量支持。
• 所有之前手动写的@import全局颜色文件的代码都可以全部删除，避免重复引入。

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