Loading

Ant Design Vue 按需导入与 UnoCSS 样式冲突

版本信息:
"ant-design-vue": "^3.2.20",

背景

Ant Design Vue 使用 Vite 插件 unplugin-vue-components 按需导入,组件上写的 UnoCSS 样式会被覆盖,无法生效。

圆角 10px 不生效:

image

原因分析

查看控制台:

image

可以看到,由于按需加载,button组件的样式在 unocss 之后被加载,因此优先级高, unocss的样式被覆盖了。

解决方案

1.不使用按需加载

不使用按需加载,并在 main.ts 导入css时,先导入 Ant Design Vue 的 css 文件,再导入 UnoCSS 的 css 文件。

import 'ant-design-vue/dist/antd.css'
import 'uno.css'

至于是全局完整注册组件还是全部部分注册组件,都可以,不会影响 css 的加载顺序

效果:

image

先加载了antd.css,后加载了uno.css,所以uno.css的样式生效了。

posted @ 2023-06-16 02:04  sq800  阅读(1443)  评论(0)    收藏  举报