[vue] ant-design-vue 4.x升级问题-样式丢失问题

该文档是在升级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的使用

解决方案

unplugin-vue-components 插件是一个按需引入的插件,所以删除该插件后,也要删除对应生成的 components.d.ts 文件,然后手动引入所有使用的 ant-design-vue 组件在打包后发现正常

Logo

前往低代码交流专区

更多推荐