React项目中使用less
1.安装less,less-loader两个包
2.yarn eject暴露出webpack配置(我这里使用的yarn使用npm的命令是:npm run eject)
3.修改webpack配置,我使用的react版本是16.12.0
修改这个文件,这里有三种修改方式:
一、在webpack配置中你会发现配置了sass,把所有的sass配置换成less的配置
缺点是无法再使用sass
二、同样的在webpack同样的地方,定义sass正则的地方,同样定义一份less的正则
然后,搜索在配置文件中搜索sassRegex和sassModuleReges,将这两个配置复制一份,把sass改成less,把sass-loader改成less-loader
缺点是代码冗余,在实际开发中我们不一定两者都要使用,二选一
三、找到cssRegex定义的地方,校对css的正则修改为/\.(css|less)$/,然后找到getStyleLoaders ,往下找loader的依赖,先找style-loader,再往下找到css-loader,在跟css-loader同级的地方,添加一个less-loader的依赖关系
4.这时重启项目,一定要重启,一定要重启,一定要重启,就能看到less生效了
如果项目在重启过程中有报错缺少包,缺少什么安装什么包就可以了