如何在使用CSS Modules的项目中配置全局共享SCSS文件？

核心原因：CSS Modules 会对每个 .scss 文件做独立编译，Sass 变量、mixin 属于预编译阶段的内容，你在 App.tsx 中引入的全局 scss 不会被注入到其他组件的 scss 编译流程中，因此无法识别。

根据你使用的构建工具选择对应的配置方式即可，配置完成后全局 index.scss 会自动注入到所有 scss 文件的编译头部，无需手动引入：

1. Vite 项目 #

在 vite.config.ts 中添加预处理器配置：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  css: {
    preprocessorOptions: {
      scss: {
        // 替换为你自己的 index.scss 绝对路径，支持别名
        additionalData: `@import "@/styles/index.scss";`
      }
    }
  }
})

2. Webpack 项目 #

2.1 自定义 Webpack 配置 / 已 eject 的 Create React App #

修改 scss 对应的 loader 配置：

module.exports = {
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'sass-loader',
            options: {
              additionalData: `@import "src/styles/index.scss";`
            }
          }
        ]
      }
    ]
  }
}

2.2 未 eject 的 Create React App #

先安装依赖：
npm i customize-cra react-app-rewired -D
根目录新建 config-overrides.js：

const { override, addSassLoaderOptions } = require('customize-cra')

module.exports = override(
  addSassLoaderOptions({
    additionalData: `@import "src/styles/index.scss";`
  })
)

修改 package.json 的启动命令：

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test"
}

3. Next.js 项目 #

在 next.config.js 中添加配置：

/** @type {import('next').NextConfig} */
const nextConfig = {
  sassOptions: {
    additionalData: `@import "@/styles/index.scss";`,
  },
}

module.exports = nextConfig

• 全局 index.scss 中只能存放变量、mixin、% 占位符这类编译后不会生成实际 CSS 代码的内容，不要写普通样式规则，否则会导致每个 scss 文件编译后都重复生成相同样式，造成代码冗余。
• 配置中的路径建议使用绝对路径或者别名，避免相对路径报错。
• 配置完成后重启 IDE 和构建服务，清除旧缓存即可解决变量未定义的提示问题。

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