ant-design-vue@4使用unplugin-vue-components导入的坑

首先说说坑，正常引入代码如下：

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()
      ]
    })
  ]
  // ...
})

控制台会报错

[vite] Internal server error: Failed to resolve import "ant-design-vue/es/button/style/css" from "src/components/home.vue". Does the file exist?

说明也比较明显，告诉我们没有css文件，因为antd vue的4版本弃用了原先的less方案，采用CSS-in-JS，所有我们无需再引入样式了。

改写很简单，只要如下配置即可正常使用👇

resolvers: [
  AntDesignVueResolver({
    importStyle: false
  })
]

OK，搞定！！！

其他更新可去官网查看

从 V3 到 V4 - Ant Design Vue (antdv.com)