react+antd:配置webpack,支持less及antd更换主题

使用"create-react-app": "^3.0.1"创建的app,主要依赖:

    "antd": "^3.19.1",
    "axios": "^0.18.0",
    "react": "^16.8.6",
    "react-app-polyfill": "^1.0.1",
    "react-dev-utils": "^9.0.1",
    "react-dom": "^16.8.6",
    "react-router": "^5.0.0",
    "react-router-dom": "^5.0.0""less": "^3.9.0",
    "less-loader": "^5.0.0",

(1) 为了使项目能使用less,先用npm run eject暴露webpack配置,webpack.config.js中增加less文件的打包规则,仿照本身存在的sass规则,先定义正则匹配的变量:
在这里插入图片描述
(2) 在rules中增加less的规则:
在这里插入图片描述

尝试启动npm start,报错
在这里插入图片描述
这里安装一下less模块就可以正常启动了。

(3)接下来使用antd要求按需加载,官网提供的方法是使用 react-app-rewired来增加配置,但我已经把webpack配置都暴露出来了,所以手动更改下。

首先还是要安装babel-plugin-import,这是一个用于按需加载组件代码和样式的 babel 插件,然后在webpack.config.js中增加以下配置:
在这里插入图片描述
start一下,ok又报错了(╥╯^╰╥)
在这里插入图片描述
(4)查到一个 => issue,是less版本的问题,降到less@2.x的版本可以正常运行,也有解决方法是开启 less-loader 配置项javascriptEnabled: true,我选择了后一种方法。在处理 loaders 的函数getStyleLoaders中增加 option 配置,单独对 less-loader 做处理为了给后面的更换主题做准备(大佬们有更好的写法请留言啊,Ծ‸Ծ,)
在这里插入图片描述

接下来npm start成功
在这里插入图片描述
(5)ok让我们来尝试下更改主题,官网中的方法
在这里插入图片描述
结合之前自己的配置修改了一下type="primary"的按钮的颜色,
在这里插入图片描述
结果完全ojbk,收工
在这里插入图片描述

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值