less在React中不生效 以及 为React项目配置less支持

通过create-react-app脚手架创建出来的React项目默认是不支持less的，这也就是为什么明明引入了.less样式文件，样式却不生效的原因。所以接下来我们开始为React项目配置less支持。

修改webpack.config.js中的配置

那么问题来了，React不是将webpack.config.js文件隐藏起来了吗？既然藏起来了，那就把它揪出来！在项目根目录打开终端，输入以下命令

npm run eject

执行完毕后，会发现项目目录中多了两个文件夹：config和scripts，我们要改的是配置，所以当然去config里去找webpack.config.js了

先找到这个地方

在箭头所指处添加如下两行代码

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

接着再找到这个地方

箭头所指的这两处代码块全部复制，然后粘贴到它俩的下面，并且把粘贴出来的代码中所有sass改成less，至此你已经成功为React项目配置了less支持。

注意

如果通过npm start运行项目发现报错了，那么在这里给出两种可能的原因

1.忘记重启项目了

毕竟是改了配置，所以项目一定要记得再重启一下，如果还报错，看看是不是下面的原因

2.忘记下载less和less-loader了

直接 yarn add less less-loader，再重启项目即可。

作者叨叨

为什么React脚手架里默认不支持less啊，不支持就算了，引入了less文件后，还不报错，很烦。

npm能不用就不用吧，真心不好用，动不动就各种报错耽误时间，yarn才是王道，下载成功率太高了

配置这个支持less的时候，我遇到了一些报错，可是在必应（也是个搜索引擎，广告很少挺好用的，百度吃相太难看）的时候，网上的博主好多都说是less-loader版本问题，但我后来验证了一下，目前安装最新版没什么问题了，可以放心安装最新版。