vue3集成不同UI框架导致样式错乱不显示

目录

前言

1、下载指定ant-design-vue版本的包，

2、将这个版本里的dist/antd.css文件复制到vue3项目src下任意地方

3、查看iframedom结构

---

前言

当前项目使用vue3+naive-ui，子项目使用vue2+ant-design-vue@1.x版本，通过iframe嵌入vue2进行内容显示。当前bug点在于 ant-design-vue的组件在dom查看有显示，但是没有加载样式资源，导致样式错乱。

---

当前vue3项目里下载naive-ui的同时，也下载安装了ant-design-vue@3.x版本。所以不能在当前系统再次安装ant-design-vue@1.x，需要在别的地方下载1.x版本

1、下载指定ant-design-vue版本的包，

npm install ant-design-vue@1.3.17

2、将这个版本里的dist/antd.css文件复制到vue3项目src下任意地方

3、查看iframe dom结构

是否有新增的css样式，如果有的的话，在此样式下引入antd.css的地址：譬如：

.notice-wrap {
@import './antd.css' // 引入css文件
}

---

希望鬼畜问题少一点~