乾坤qiankun（微前端）样式隔离解决方案--使用插件替换前缀

本文主要是介绍乾坤qiankun（微前端）样式隔离解决方案--使用插件替换前缀，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

一、前言

qiankun作为微前端的一种融合方式，目前也比较成熟，但是由于各类开发技术选型非常繁多，导致了在项目中配置不同，解决别人的问题，不一定能解决自己的问题。

使用的js框架的不同或版本的不同：vue/react 等，vue2/vue3 等
ui组件库版本的不同，以element为例，可分为element-ui/element-plus
打包工具的不同，比如常用的webpack/vite等
各类插件版本的不同，比如，node的版本，webpack的版本，vite的版本，node-sass/sass-loader的版本等

二、样式隔离

single-spa 没有做这部分的工作。一个大型的系统会有很的微应用组成，怎么保证这些微应用之间的样式互不影响？微应用和主应用之间的样式互不影响？这时只能通过约定命名规范来实现，比如应用样式以自己的应用名称开头，以应用名构造一个独立的命名空间，这个方式新系统还好说，如果是一个已有的系统，这个改造工作量可不小。

本文以主应用UI框架与子应用UI框架分别使用element-ui和element-plus来做示例。

因为element-ui和element-plus前缀相同、命名规则相同，但内部html结构发生变化，从而导致子应用element-plus的样式会被污染。

三、解决方案

以下设置需要注意不能开启sandbox:{strictStyleIsolation:
true}，并且注意自定义样式最好规范加上自定义规范，尽量不与基座应用同名。

1、使用change-prefix-loader替换js中的class前缀

安装依赖change-prefix-loader

npm i change-prefix-loader -D

配置规则

<!-- vue.config.js -->module.exports = {chainWebpack: config => {config.module.rule('change-prefix').test(/\.js$/).include.add(path.resolve(__dirname, './node_modules/element-ui/lib')).end().use('change-prefix').loader('change-prefix-loader').options({prefix: 'el-',replace: 'gp-'}).end()},
}

2、使用postcss-change-css-prefix替换css样式前缀

安装依赖

npm i postcss-change-css-prefix -D

配置规则，在根目录创建postcss.config.js

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