乾坤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-',
    }),
  ],
}
3、options参数
  1. prefix
    type: string, 可选
    需要被替换的前缀
    default: el-
  2. replace
    type: string, 可选
    需要替换的前缀
    default: gt-
4、element-ui的组件前缀和样式前缀都被替换成gp了。

项目源码:

html标签的前缀,原来是el

css样式的前缀,原来是.el


运行后的代码:

html标签的前缀,编译后calss是el

css样式的前缀,编译后是.gp

目录
相关文章
|
19天前
|
前端开发 数据可视化 数据挖掘
前端开发者的福音:这些插件让你轻松应对各种复杂需求!
前端开发领域充满创意与挑战,面对复杂需求,开发者常感力不从心。本文通过三个真实案例,介绍如何利用Chart.js、ESLint和Ant Design等强大插件,解决数据可视化、代码质量和UI组件复用等问题,提高开发效率,创造更出色的前端作品。
20 3
|
2月前
|
前端开发 JavaScript 开发者
qiankun(乾坤)微前端框架简介
qiankun(乾坤)微前端框架简介
167 1
|
2月前
|
前端开发 JavaScript
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
196 1
|
2月前
|
设计模式 前端开发 JavaScript
前端编程的异步解决方案有哪些?
本文首发于微信公众号“前端徐徐”,介绍了异步编程的背景和几种常见方案,包括回调、事件监听、发布订阅、Promise、Generator、async/await和响应式编程。每种方案都有详细的例子和优缺点分析,帮助开发者根据具体需求选择最合适的异步编程方式。
85 1
|
2月前
|
存储 前端开发 Java
验证码案例 —— Kaptcha 插件介绍 后端生成验证码,前端展示并进行session验证(带完整前后端源码)
本文介绍了使用Kaptcha插件在SpringBoot项目中实现验证码的生成和验证,包括后端生成验证码、前端展示以及通过session进行验证码校验的完整前后端代码和配置过程。
182 0
验证码案例 —— Kaptcha 插件介绍 后端生成验证码,前端展示并进行session验证(带完整前后端源码)
|
2月前
|
资源调度 前端开发 安全
前端实战:基于Verdaccio搭建私有npm仓库,轻松上传与下载自定义npm插件包
前端实战:基于Verdaccio搭建私有npm仓库,轻松上传与下载自定义npm插件包
101 0
|
3月前
|
运维 前端开发
前端使用antdesign导出插件跨域问题
前端使用antdesign导出插件跨域问题
38 1
|
3月前
|
前端开发
前端基础(四)_CSS层叠样式表_什么是css_css样式的引入方式_样式表的优先级_样式选择器
本文详细介绍了CSS(层叠样式表)的基本概念、语法规则、引入方式、样式表的优先级和样式选择器。文章解释了CSS的作用,展示了如何在HTML中通过行内样式、内部样式和外部样式引入CSS,讨论了不同CSS选择器的优先级和如何确定最终的样式应用。此外,还强调了使用`!important`规则时的优先级高于行内样式。
93 1
|
2月前
|
前端开发 JavaScript
轻松上手:基于single-spa构建qiankun微前端项目完整教程
轻松上手:基于single-spa构建qiankun微前端项目完整教程
46 0
|
3月前
|
前端开发
【前端web入门第五天】03 清除默认样式与外边距问题【附综合案例产品卡片与新闻列表】
本文档详细介绍了CSS中清除默认样式的方法,包括清除内外边距、列表项目符号等;探讨了外边距的合并与塌陷问题及其解决策略;讲解了行内元素垂直边距的处理技巧;并介绍了圆角与盒子阴影效果的实现方法。最后通过产品卡片和新闻列表两个综合案例,展示了所学知识的实际应用。
65 11