el-config-provider在Vue3中自定义命名空间实现
一、场景
子应用使用微应用(qiankun)方式嵌入主应用时，如果主应用和子应用ElementUI版本不一致，可能会出现样式问题
二、实现
1、引入依赖sass、sass-loader
npm install sass
npm install sass-loader2、创建element.scss
在src下创建/style/element.scss文件
@forward 'element-plus/theme-chalk/src/mixins/config.scss' with ($namespace: 'sub-el' // 自己需要的前缀
);
@import "element-plus/theme-chalk/src/index.scss";3、main.js中引入创建的scss
import './style/element.scss'4、App.vue中设置el-config-provider
<template><!--要与之前定义的名称一致--><el-config-provider namespace="sub-el"><router-view></router-view></el-config-provider>
</template>5、检查文件deep(.el-xxx)
需要替换为sub-el-xxx新的名称