该文档是在升级ant-design-vue到4.x版本的时候遇到的问题
项目环境
"vue": "^3.3.4",
"ant-design-vue": "^4.0.0",
"vite": "^4.4.4",
"unplugin-vue-components": "^0.25.1"
以上是开发项目时使用的包以及包的版本，使用的脚手架是vite
问题场景
当使用ant-design-vue3.x版本时没有任何问题，但是当升级ant-design-vue到4.0版本时，因为ant-design-vue4.x使用了css-in-js需要修改vite.config.js配置
plugin:[
Components({
resolvers: [AntDesignVueResolver({
importStyle: "less"
})]
}),
]
变更为
plugin:[
Components({
resolvers: [AntDesignVueResolver({
resolveIcons: true,
cjs: true,
importStyle: false
})]
}),
]
修改后当开发环境正常展示的时候，打包出了问题，发现自定义的组件以及单文件中通过<style lang="css"></style>定义的样式都失效了，样式中的图片也自然失效了
通过观察发现打包生成的文件中存在样式，但是确没有被引用，一直没有找到有效的解决方案，在ant-design-vue官网中提到说是插件’unplugin-vue-components’会引发一些不可预测问题，尝试删除unplugin-vue-components的使用文章来源：https://www.toymoban.com/news/detail-625967.html
解决方案
unplugin-vue-components 插件是一个按需引入的插件，所以删除该插件后，也要删除对应生成的 components.d.ts 文件，然后手动引入所有使用的 ant-design-vue 组件在打包后发现正常文章来源地址https://www.toymoban.com/news/detail-625967.html
到了这里，关于ant-design-vue 4.x升级问题-样式丢失问题的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
