React中使用Less文件

本项目：React 版本 16.13.1，使用create-react-app脚手架工具搭建。

在react中使用less文件运行不会报错，但是样式会无效

原因：create-react-app是由React官方提供并推荐使用构建新的React单页面应用程序的最佳方式,其构建的项目默认是不支持less的,需要我们手动集成

解决：

安装less和less-loader插件包

npm install less-loader less

暴露webpack配置文件，注意eject命令是一次性命令，运行后无法恢复

npm run eject

这时项目结构就会多出了一个config文件，以及package.json 文件中多了很多内容

接下来就是配置less-loader了

在config/webpack.config.js文件中修改以下配置：

1，修改style files regexes（样式文件正则），在这部分最后添加如下两行代码：

 

2，修改 getStyleLoaders 函数，添加代码:

 

3，最后一处修改大约在451行左右，模仿代码中提供的sassRegex代码，添加如下代码：

 

就这样webpack.config.js文件修改完成，重新运行就可以看到效果了~