下文是记录一次十分坑爹的less配置
框架选择
react框架很多,antd是目前生态比较好 加上 圣诞事件 一下火大了。。。
言归正传
众所周知 antd基于less写的样式,create-react-app默认不支持less,所以需要手动配置,网上也有很多配置,但是新版的webpack 4 .x.x 变了,它变了。。。。
1.首先 脚手架弄好后默认是收起配置的 你看不到熟悉的config了,这个时候你需要运行下 yarn eject
(也可以用n pm run
,取决于你使用的安装工具)
2.这个时候你会发现多出了 config和scripts 文件夹
3.配置less我们需要修改webpack.config.js文件,以前版本应该会有个pro和dev环境的 ,现在二合一了方便了很多
4.这一版本对立面的配置内容进行了 公共提取做了环境判断,所以会有一些改变例如里面的sass配置
image.png
image.png
是这样的
我很高兴的使用了相同的方法,同时也参考了网上相同问题的大神解答
将代码复制改成了less以为好了
but
but
but
一堆错误或者根本无法运行
也用到了老的方式去写
image.png
也没用
疯狂搜索谷歌百度中。。。。。(webpack配置还是不熟悉啊。。。。)
好了废话不说了,直接上解决方案
第一步:
修改原有的cssReagex和cssModuleRegex
image.png
第二步:
在原有的配置上加上如下箭头指示的部分
image.png
然后重新运行 start即可
添加antd主题修改
红框中注释掉的是默认配置
image.png
网友评论