react配置sass全局变量(不需要eject暴露环境)

1.安装3个模块:

cnpm install    react-app-rewired    customize-cra    sass-resources-loader  --save-dev

2.在package.json的同级目录中新建一个config-overrides.js文件

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

在package.json文件中,将 "scripts"修改为

   "scripts": {
    "build-css": "node-sass-chokidar src/ -o src/",
    "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
    "start-js": "node scripts/start.js",
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-app-rewired eject"
  },

这样就可以在全局使用自定义的变量了。