使用antd组件库,将基准调至 12px

使用了 antd 新组件库,但是基准都是 14px,而系统的默认基准是 12px,通过一些全局配置,可以直接将基准调至 12px

参考 antd 主题配置

最开始,采用的是 webpack的配置方式,也就是在webpack.config.js中,在 less-loader,设置紧凑主题(compact)

image.png

但其实结果不太理想,在本地是可以正常调整到12px,但在发布dev之后,有的是12px,有的还是14px。这非常使人疑惑,最后大概认为是 打包后资源请求先后的问题,但我也不能每个修改样式,然后加 !important 吧,所以又看了官方的文档,发现,还有一种方式,在样式文件全量引入 antd.compact.less  或者 antd.compact.css

@import '~antd/dist/antd.compact.less'; // 引入官方提供的紧凑 less 样式入口文件

或者

@import '~antd/dist/antd.compact.css'; // 引入官方提供的紧凑 css 样式入口文件

这种方式在本地生效,在dev下也生效的~

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值