当前位置:   article > 正文

React中使用Less文件_react项目引入less文件报红

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文件修改完成,重新运行就可以看到效果了~

 

 

 

 

 

 

 

 

 

 

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/知新_RL/article/detail/65951
推荐阅读
相关标签
  

闽ICP备14008679号