React项目配置全局scss

1.安装 sass-resources-loader customize-cra

npm install sass-resources-loader
npm install customize-cra

2.创建公共的配置文件

image.png

进行webpack配置创建config-overrides.js文件

const { override, adjustStyleLoaders } = require("customize-cra");
module.exports = override(
  // ...其他配置...
  adjustStyleLoaders(rule => {
    if (rule.test.toString().includes("scss")) {
      rule.use.push({
        loader: require.resolve("sass-resources-loader"),
        options: {
          resources: "./src/styles/output.scss" //这里是你自己放公共scss变量的路径
        }
      });
    }
  })
  // ...其他配置...
);

3.项目使用

image.png

image.png