如何在react中配置使用less

1、解包webpack配置文件

使用create-react-app 创建的项目默认是看不到webpack配置文件webpack.config.js的，需要先解包暴露出来，然后才能修改里面的配置信息。

 

运行命令: yarn eject

注意：此命令一旦运行会修改package.json 文件此过程不可逆

可能遇到得问题

windows执行此命令会提示

yarn : 无法加载文件 C:\Users\cdb\AppData\Roaming\npm\yarn.ps1，因为在此系统上禁止运行脚本。

 

 

 

解决办法:

管理员身份运行powershell  执行以下命令:  set-ExecutionPolicy RemoteSigned

 

2、安装less与less-loader

命令：npm install less-loader less --save

 

3、修改webpack.config.js

 

 

找到下面这段代码：

const cssRegex = /\.css$/;

const cssModuleRegex = /\.module\.css$/;

const sassRegex = /\.(scss|sass)$/;

const sassModuleRegex = /\.module\.(scss|sass)$/;

 

在此代码下添加

 

const lessRegex = /\.less$/;

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

 

 

搜索oneof 往下翻找到关于sass配置得部分 如下图

 

 

复制一份 ，将sass改为less

 

到此react使用less 配置完成。