qiankun 和 ant-design-vue 一起使用时，子应用的样式影响到父应用

Question

可复现示例 https://github.com/rxliuli/mi...

复现步骤

1. git clone && yarn install
2. cd apps/vue-app && yarn dev
3. cd apps/main-app && yarn dev
4. 打开 http://localhost:3000/app/vue...

使用 qiankun 推荐做法 生成的 css，仍有部分没有加上前缀导致污染主应用

Answer 1

没有具体运行代码，说一下之前业务中捣腾qiankun时关于样式问题的解决方式，仅供参考：

各个应用样式隔离

这个问题乾坤框架做了一定的处理，在运行时有一个sandbox的参数，默认情况下沙箱可以确保单实例场景子应用之间的样式隔离，但是无法确保主应用跟子应用、或者多实例场景的子应用样式隔离。如果要解决主应用和子应用的样式问题，目前有2种方式：

1. 在乾坤种配置 { strictStyleIsolation: true } 时表示开启严格的样式隔离模式。这种模式下 qiankun 会为每个微应用的容器包裹上一个 shadow dom 节点，从而确保微应用的样式不会对全局造成影响。但是基于 ShadowDOM 的严格样式隔离并不是一个可以无脑使用的方案，大部分情况下都需要接入应用做一些适配后才能正常在 ShadowDOM 中运行起来，这个在 qiankun 的 issue 里面有一些讨论和使用经验。
2. 人为用 css 前缀来隔离开主应用和子应用，在组件层面用 css scoped进行组件层面的样式区分，在 css框架层面可以给css组件库加上不同的前缀，比如文档中的 antd 例子：
3. 配置 webpack 修改 less 变量

{
  loader: 'less-loader',
+ options: {
+   modifyVars: {
+     '@ant-prefix': 'yourPrefix',
+   },
+   javascriptEnabled: true,
+ },
}

b. 配置 antd ConfigProvider

import { ConfigProvider } from 'antd';
   
export const MyApp = () => (
  <ConfigProvider prefixCls="yourPrefix">
    <App />
  </ConfigProvider>
);