重写react项目（一）使用less

react默认是不暴露webpack配置的，但是我们可以通过一些插件在不暴露webpack的情况下使用less

需要借助两个库react-app-rewired和customize-cra

1.安装react-app-rewired

https://github.com/timarney/react-app-rewired/

npm install react-app-rewired --save-dev

2.安装后react-app-rewired后，在package.json中修改

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

3.在项目根目录下新建config-overrides.js文件

4.安装customize-cra

https://github.com/arackaf/customize-cra#customize-cra

npm install customize-cra --save-dev

5.在config-overrides.js文件中配置

const { override, addLessLoader } = require("customize-cra");
module.exports = override(
    addLessLoader({
      strictMath: true,
      noIeCompat: true,
      localIdentName: '[local]--[hash:base64:5]' // if you use CSS Modules, and custom `localIdentName`, default is '[local]--[hash:base64:5]'.
    })
  );

6.安装less和less-loader

npm i less 
npm i -D less-loader

7.ok,接下来把.css后缀改为.less即可。如有错漏步骤，欢迎指正，详细用法请参考文档。