一、背景
使用vant + vue3 + vite 搭建h5，按需引用组件
image.png
二、现象
使用
van-button这些组件时完全没有问题，但是在使用轻提示（Toast）时死活不显示，实际排查后发现只是不显示，其实元素已经挂载到body元素下了，只是因为样式原因导致看不见。
三、原因
@vant/auto-import-resolver这个插件对某些组件的样式无法引入
四、解决
4.1. 取消@vant/auto-import-resolver这个插件的样式依赖
vite.config.js中通过importStyle: false,取消插件引入样式
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
Components({
resolvers: [
VantResolver({
importStyle: false,
}),
],
}),
],
});
4.2. 在main.js
import "vant/lib/index.css";
网友评论