該文檔是在升級ant-design-vue到4.x版本的時候遇到的問題
項(xiàng)目環(huán)境
"vue": "^3.3.4",
"ant-design-vue": "^4.0.0",
"vite": "^4.4.4",
"unplugin-vue-components": "^0.25.1"
以上是開發(fā)項(xiàng)目時使用的包以及包的版本，使用的腳手架是vite
問題場景
當(dāng)使用ant-design-vue3.x版本時沒有任何問題，但是當(dāng)升級ant-design-vue到4.0版本時，因?yàn)閍nt-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
})]
}),
]
修改后當(dāng)開發(fā)環(huán)境正常展示的時候，打包出了問題，發(fā)現(xiàn)自定義的組件以及單文件中通過<style lang="css"></style>定義的樣式都失效了，樣式中的圖片也自然失效了
通過觀察發(fā)現(xiàn)打包生成的文件中存在樣式，但是確沒有被引用，一直沒有找到有效的解決方案，在ant-design-vue官網(wǎng)中提到說是插件’unplugin-vue-components’會引發(fā)一些不可預(yù)測問題，嘗試刪除unplugin-vue-components的使用文章來源：http://www.zghlxwxcb.cn/news/detail-625967.html
解決方案
unplugin-vue-components 插件是一個按需引入的插件，所以刪除該插件后，也要刪除對應(yīng)生成的 components.d.ts 文件，然后手動引入所有使用的 ant-design-vue 組件在打包后發(fā)現(xiàn)正常文章來源地址http://www.zghlxwxcb.cn/news/detail-625967.html
到了這里，關(guān)于ant-design-vue 4.x升級問題-樣式丟失問題的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
