vue3+vite项目接入qiankun主应用时，样式丢失解决方案vue3+vite项目打包之后接入qiankun主应用

序言

相信很多人都有过，刚入职要接手一堆烂摊子，各种粑粑山代码，牵一发而动全身，这次我遇到的比较棘手。

正文

入职两天，刚写好页面，老大就让我去把项目去接入到微前端框架中，听起来很简单，接入而已so ez。目前的项目使用的vue3+vite，用过qiankun应该都知道，qiankun目前是不支持vite接入的，大家可以使用大佬开发的vite插件vite-plugin-qiankun。我很快就配置好并且接入到主应用里面了，本地调试一点问题没有，简直完美，如果事情这样结束了，那可真是太好了。

首先，本地和主应用联调完全ok，但是发布到测试环境之后发现，我的子应用项目样式全乱了。我研究了两个半小时之后发现，我的子应用项目的样式被主应用的样式污染丢失了，我记得qiankun框架是有提供样式隔离的，所以我去查看了一下，主应用的配置，发现strictStyleIsolation和experimentalStyleIsolation这两个参数都设置为false，我尝试修改一下，改了之后发现，其他的子应用样式也全乱了，我内心真的是一万头羊驼狂奔啊。

修改主应用牵扯那么多我是不愿意动了，我只能继续想解决办法了，目前存在的问题是样式丢失，我在网上查了很多方案，其中一个比较有用的是在vite配置中禁用掉css代码压缩，这个让我接近成功，但是样式还是有问题，我又找了一些方案，终于找到了真正的解决方案，那就是vite-plugin-css-injected-by-js插件，这个插件的主要功能就是把css样式通过js注入到页面中，输出成一个js文件，既然css文件的样式会丢失，那我们就不要css文件了，全部注入到js文件中。

经过测试发现，vite-plugin-css-injected-by-js这个插件完美解决了样式丢失的问题。使用方法也很简单：

首先安装

npm install vite-plugin-css-injected-by-js --save-dev
或
yarn add vite-plugin-css-injected-by-js --dev

在vite.config.js配置文件中:

import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js'

export default {
 plugins: [
      cssInjectedByJsPlugin(),
    ],
}

然后打包发布，就可以发现现在已经完美解决了样式丢失的问题！