React应用中能否通过全局SCSS统一导入模块及自动全局生效？

问题1：能否通过global.scss统一导出变量、混合宏、函数？ #

完全可以这么做，你的实现思路是可行的。

具体实现注意事项： #

• 路径正确性：确保global.scss里@use的路径准确，如果variables.scss、mixins.scss和global.scss在同一目录下，直接写文件名即可；如果使用了绝对路径别名（比如配置src为根路径），可以写成@use "src/scss/variables"这类格式，匹配你的项目配置。
• 命名空间简化：你的示例里用global.$primary-color带命名空间的写法是SCSS的规范用法，要是觉得前缀麻烦，组件SCSS里可以改成@use "src/scss/global" as *，这样就能直接写$primary-color，但要注意避免不同模块的变量名冲突。
• 防冲突进阶配置：如果是大型项目，还可以给@forward的内容加统一前缀，比如@forward "variables" as var-*，这样组件里要写global.$var-primary-color，能有效降低命名冲突概率。

你给出的示例代码只要路径配置正确，就能正常运行。

问题2：能否仅在main.jsx/app.jsx导入全局SCSS，让所有组件SCSS自动使用其中内容？ #

直接在JS文件里导入不行——这种方式只会把编译后的CSS注入全局样式，但SCSS的变量、混合宏、函数是编译时特性，不属于运行时全局变量，组件SCSS在单独编译时无法读取到这些内容。

不过可以通过编译工具配置实现“自动注入”，不用每个组件SCSS手动导入：

• Vite项目：在vite.config.js中添加配置：

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "src/scss/global" as *;`,
      },
    },
  },
});

• Webpack项目：在webpack.config.js的sass-loader配置里设置：

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'sass-loader',
            options: {
              additionalData: `@use "src/scss/global" as *;`,
            },
          },
        ],
      },
    ],
  },
};

配置后，每个组件SCSS文件在编译时都会自动插入指定的@use语句，就能直接使用全局模块里的变量、混合宏和函数了。

内容的提问来源于stack exchange，提问作者Jože Kuhar