解决qiankun微前端Vue2+Element-ui主应用跳转到Vue3+Element-plus子应用样式冲突问题

一、前言

二、解决Vue2主应用与Vue3子应用样式冲突方法（推荐使用第二种）

第一种、主应用上修改

 // 启动 qiankun
  start({
     prefetch: false, // 取消预加载
     sandbox: {
     // strictStyleIsolation: true, // 若需 Shadow DOM 隔离可设为 true
      experimentalStyleIsolation: true // 推荐开启，兼容性好
     }
   })

第二种、Vue3子应用修改——修改 Element Plus 命名空间ep（推荐）

1、修改根组件

<!-- 子应用 App.vue -->
<template>
  <el-config-provider namespace="ep">
    <router-view />
  </el-config-provider>
</template>

const instance = createApp(App);
 // 注册ElementPlus
  instance.use(ElementPlus, {
    locale, // 语言设置
    namespace: "ep"
  });

2、配置 SCSS 变量

@forward 'element-plus/theme-chalk/src/mixins/config.scss' with (
  $namespace: 'ep'
);

3、配置构建工具，将上述 SCSS 文件全局引入。

1、Webpack：在 vue.config.js 中，配置 sass-loader

// 子应用 vue.config.js
css: {
   loaderOptions: {
     scss: {
       additionalData: `@use "@/styles/element/index.scss" as *;`
     }
   }
 }

2、Vite：在 vite.config.js 中，配置 sass-loader

css: {
   preprocessorOptions: {
      scss: {
        additionalData: `@use "@/styles/element/index.scss" as *;`
      }
    }
  },

4、修改入口文件（子应用 main.js 中需要引入 Element Plus 的 SCSS 源文件）,而不是编译后的 CSS，这样命名空间配置才会生效。（关键点）

// main.ts
import ElementPlus from "element-plus";
// 注释掉这行
// import "element-plus/dist/index.css";
// 改为引入 SCSS 源文件
import "element-plus/theme-chalk/src/index.scss";
// element dark scss
// 注释掉这行
// import "element-plus/theme-chalk/dark/css-vars.css";
// 改为引入 SCSS 源文件
import "element-plus/theme-chalk/src/dark/css-vars.scss";

相关文章

基于ElementUi再次封装基础组件文档

vue3+ts基于Element-plus再次封装基础组件文档