react脚手架create-react-app安装后less的webpack.config.js配置

create-react-app脚手架安装好react工程后是无法支持less的。而且最新版本的脚手架安装好工程后运行npm run eject暴露出依赖后在config目录下只有webpack.config.js文件，而不是像老脚手架暴露出依赖后会有webpack.config.dev.js和 webpack.config.prop.js网上好多讲的配置方法也不行，于是特记录自己成功的方法。
并且react文件的className你能使用less文件里面的变量。

第一步：用脚手架安装工程

npx create-react-app test-react

第二步：暴露依赖

npm run eject
运行完后，会多出两个文件config和scripts，如下

第三步：修改webpack.config.js实现less可用

修改第一处：添加两行

const lessRegex = /\.less$/;
const lessModuleRegex = /\.less$/;

修改第二处： 添加以下代码在430行左，这里必须注意的是，必须将以下代码放在 test: cssRegex, 的前面，否则不会生效，本人在这里遇到坑了，搞了很久。

{
   test: lessRegex,
   exclude: lessModuleRegex,
   use: getStyleLoaders(
       {
         importLoaders: 1,
         sourceMap: isEnvProduction && shouldUseSourceMap,
       },
       'less-loader'
   ),
   sideEffects: true,
 },

 {
   test: lessModuleRegex,
   use: getStyleLoaders(
       {
         importLoaders: 1,
         sourceMap: isEnvProduction && shouldUseSourceMap,
         modules: true,
         getLocalIdent: getCSSModuleLocalIdent,
       },
       'less-loader'
   ),
 },

第五步：安装less和less-loader

这个时候你重新运行npm start，但是会提示你less-loader没装。于是再安装less 和less-loader
npm install less less-loader --save
然后再次运行npm start

第六步：验证

更改js和less如下：

实际显示结果：正常显示