vue3 vite 下 ant design vue 的message不显示？

Question

vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [AntDesignVueResolver()]
    })
  ]
})

main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { message } from 'ant-design-vue'
import './assets/normalize.css'

createApp(App).use(router).use(message).mount('#app')

.vue

<template>
        <button class="btn" @click="info">{{ state.btnText }}</button>
</template>
<script setup>
import { message } from 'ant-design-vue';
...
message.info("Not enough balance!")
...
</script>

以上是我的代码，点击按钮后，会创建message节点，可是没有样式，也没有内容，请问这是怎么回事呢

Answer 1

说明

unplugin-vue-components 插件无法处理非组件模块，如 message

解决

手动引入

import { message } from 'ant-design-vue'
import 'ant-design-vue/es/message/style/css'

Answer 2

是不是没有引入ant-design-vue 的css 样式，按需加载组件也要引入样式吧