React中配置less

在React项目中配置less需要改配置文件,所以我们需要找到webpack.config.js文件。现在creat-react-app创建的react项目都是17版本以后的,配置文件被隐藏起来了,我们需要通过yarn eject命令将配置文件显示出来,注意这一操作不可逆。

接下来我们需要安装less相关的依赖 

yarn add less less-loader 或者 npm install less less-loader

下面需要修改配置文件:

1.增加less文件的正则校验

2.模仿代码中提供的sassRegex代码,添加如下代码

本以为配置了这些就可以了,后来发现重启项目报以下错误:

原因是less-loader的版本太高了,我们需要降一下这个版本就可以了

此时,如果我们的写法是这样的

这时样式文件是不生效的,因为我们使用了CSS Module,需要去开启这个

在配置中加入这个就可以了,如果我们不加入这个配置,引入less文件就需要这样

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。