vue3+vite中自动引入vant组件showToast不显示的问题

下面是自动引入的方式

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import VueSetupExtend from 'vite-plugin-vue-setup-extend'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { VantResolver } from 'unplugin-vue-components/resolvers'
import { resolve } from "path"

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    VueSetupExtend(),
    AutoImport({
      resolvers: [VantResolver()],
      imports: ['vue'],
    }),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      /** @ 符号指向 src 目录 */
      "@": resolve(__dirname, "./src")
    }
  },
})

使用场景

import { showToast } from 'vant'
showToast({ type: 'fail', message: '错误信息' })

修复方式

在main.js中引入对应css

import "vant/lib/popup/index.css"
import "vant/lib/toast/index.css"

或者全部引入

import "vant/lib/index.css";

原因是自动引入的时候没有引入对应的css导致的