如何在react项目中使用less（使用react-app-rewired customize-cra）

1. 说明

首先说一下（你也可以当做废话，直接从第二步开始）为什么使用react-app-rewired 和customize-cra,react脚手架搭建的项目会默认的把webpack的配置文件隐藏，如果想看到的话，就要使用npm run eject 将这个文件暴露出来，但是官方推荐的，我们最好还是遵循，所以就有了使用react-app-rewired customize-cra 配置项目的方案，可能你没见过，但是不要着急，跟着一步一步走下去，借着百度的东风，一定会成功的，加油！

2. 下载安装 customize-cra react-app-rewired

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

注意如果你的网不好，请配置cnpm进行（良心推荐）

3. 接下来你应该配置package.json中的内容，替换scripts

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

4. 其实到这个时候项目已经支持隐式修改webpack配置了所以在项目根目录创建配置文件

文件内容是：

const { override, addLessLoader } = require('customize-cra');
module.exports = override(
    addLessLoader({
        lessOptions: {
           javascriptEnabled: true,
           localIdentName: '[local]--[hash:base64:5]'
        }
    }),
);

5. 下载 less及其支持加载器:

npm install less less-loader --dev

条件不允许的网络可怜虫请使用cnpm
接下来你就可以试着启动一下项目了，如果报错
TypeError: this.getOptions is not a function
大概率是less版本问题
解决方法：卸载less-loader指定安装版本：

npm uninstall less-loader
npm install less-loader@5.0.0

问题完美解决，喜大普奔！