关于qiankun框架样式隔离，主应用UI框架与子应用UI框架本文基座应用vue2+element,子应用是vue3+e

本文基座应用vue2+element,子应用是vue3+element-plus.

1.不强制设置sandbox:{strictStyleIsolation: true}的情况下，子应用样式正常，但是相同的类名会覆盖主应用。如图button样式，和背景色都是子应用设置的

设置严格隔离：sandbox:{strictStyleIsolation: true}，基座应用样式正常，但是子应用的UI框架里的样式不生效，自定义样式背景色是OK的,解决不了问题

考虑到以上原因，则需要单独对UI框架样式进行处理:

方案步骤：1. 子应用使用element-plus提供的自定义命名空间,sass-loader添加前置文件，需要将element-plus升级到2.2.0以上。

   // app.vue
  <el-config-provider :locale="local" namspace="subel">
    <router-view />
  </el-config-provider>
  
  // 新建style/element/index.scss
    // element前缀样式修改,el改为subel
    @forward 'element-plus/theme-chalk/src/mixins/config.scss' with (
      $namespace: 'subel'
    );
    
  // vue.config.js
      module:{
      rules:[
        {
          test: /\.(scss|sass)$/,
          exclude: resolve('src/style/element/index.scss'), // 这个文件不要再次导入，否则会造成重复load问题,如果设置了include不包含此文件，就可以忽略设置exclude
          include: path.resolve(__dirname, './node_modules/element-plus/'),
          use: [
            {
              loader: "sass-loader",
              options: {
                implementation: require("sass"), // node-sass某些语法不支持，named等，需要sass
                prependData: `@use "@/style/element/index.scss" as *;`,
              }
            }
          ]
        }
      ]
    }

第一步骤设置完后运行会发现，UI框架不会覆盖，但是我们在写vue 文件中，如果样式没有单独存放，并且修改了UI框架的样式，则需要使用postcss来处理vue文件中的el前缀。单独存放样式文件可以采用步骤1 ，include增加src下的样式文件即可

使用postcss-change-css-prefix插件转换

// postcss.config.js
const addCssPrefix = require('postcss-change-css-prefix')
module.exports = {
  plugins: [
    addCssPrefix({
      prefix: 'el-',
      replace: 'subel-',
    }),
  ]
}

以上设置需要注意不能开启sandbox:{strictStyleIsolation: true}，并且注意自定义样式最好规范加上自定义规范，尽量不与基座应用同名，因为我的子项目需要继承一些主应用的样式，所以我不做单独隔离了：