首先说说坑,正常引入代码如下:
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,搞定!!!
其他更新可去官网查看