Ant Design Vue 按需导入与 UnoCSS 样式冲突
版本信息:
"ant-design-vue": "^3.2.20",
背景
Ant Design Vue 使用 Vite 插件 unplugin-vue-components 按需导入,组件上写的 UnoCSS 样式会被覆盖,无法生效。
圆角 10px 不生效:

原因分析
查看控制台:

可以看到,由于按需加载,button组件的样式在 unocss 之后被加载,因此优先级高, unocss的样式被覆盖了。
解决方案
1.不使用按需加载
不使用按需加载,并在 main.ts 导入css时,先导入 Ant Design Vue 的 css 文件,再导入 UnoCSS 的 css 文件。
import 'ant-design-vue/dist/antd.css'
import 'uno.css'
至于是全局完整注册组件还是全部部分注册组件,都可以,不会影响 css 的加载顺序
效果:

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

浙公网安备 33010602011771号