react 项目搭建 2 -全局配置scss

在不使用npm run eject暴露配置的情况下

1. 安装 node-sass sass-resources-loader

 npm install node-sass sass-resources-loader --save

"node-sass": "^6.0.1", "sass-resources-loader": "^2.2.4"

2. 安装 react-app-rewired（重写react脚手架配置）和 customize-cra（帮助你自定义react脚手架配置）

npm install react-app-rewired customize-cra --save

"customize-cra": "^1.0.0", "react-app-rewired": "^2.1.8"

3. 在项目根路径下新建一个js文件  config-overresides.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/assets/_vars.scss'
                    ]
                }
            });
        }
    })
);

4. 修改 package.json

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

配置之后重启项目即可。