解决React脚手架create-react-app中不能使用less问题

React脚手架create-react-app不支持less，因此需要配置webpack的webpack.config.js文件。

在使用React脚手架的时候，可能发现是没有webpack.config.js文件的。运行npm run eject，会多出两个目录config和scripts，此时可以在config目录下看到配置文件webpack.config.js。

下载less less-loader

使用 npm 或 yarn 下载均可：

// 使用npm npm install less less-loader --save-dev // 使用 yarn yarn add less less-loader

配置 webpack.config.js文件

第一步

React脚手架是支持sass的，因此可以像配置sass一样配置less就可以。在webpack.config.js文件中找到下面这几行代码，定义less变量。

​

第二步

在module属性下的rules中添加less的loader处理，找到sass的配置，对照配置一份。

修改的地方有三处，如下图我选中的红色选框：

​

分别替换成 lessRegex, lessModuleRegex, ‘less-loader‘ 并保存 如下图： 

​

这样就可以在组件中直接使用less了。