乾坤（微前端）父子样式隔离终极解决方案——替换插件前缀

已于 2022-03-28 11:16:20 修改
阅读量7.6k 收藏 28
点赞数 13
分类专栏： qiankun 文章标签： webpack postcss css3
于 2021-11-29 19:56:38 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44008717/article/details/121617721
版权

产生背景

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

解决方案

  1. 笔者之前也有写过使用post-css的解决方案，但还存在未解决的问题，有兴趣的同学可以去看一下，乾坤父子样式隔离解决方案——postcss浅尝
  2. 写一个webpack loader替换element-ui class前缀，写一个postcss plugin替换样式前缀，可以算得上是终极方案了，具体使用可以看相应文档。

效果图

在这里插入图片描述
在这里插入图片描述

github demo

github demo地址

翻滚的咸鱼君
关注
  • 13
    点赞
  • 踩
  • 28
    收藏
    觉得还不错? 一键收藏
  • 58
    评论
专栏目录
120.乾坤css隔离机制
梅花寺
12-30 2017
最近还整理一份JavaScript与ES的笔记，一共25个重要的知识点，对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识，提升工作效率。
微前端架构 之 应用之间样式隔离 （四）
qq_35876316的博客
05-22 625
CSS Modules 会自动为这些类名添加唯一的哈希值，以确保它们在每个微前端应用中都是唯一的。如果你使用 webpack 作为构建工具，你可能需要安装 css-loader 和 style-loader。最后，确保每个应用的 CSS 只在其自己的作用域内加载和应用。这可以通过在微前端框架中实现特定的加载和卸载逻辑来实现，或者通过使用。Webpack 的 css-loader 和 style-loader（或类似的工具）的 modules 选项来实现。这可以通过在 CSS 选择器前添加特定的前缀来实现。
用微前端 qiankun 接入十几个子应用后，我遇到了这些问题
LuckyWinty的博客
12-18 1694
点击上方前端Q，关注公众号回复加群，加入前端Q技术交流群简单了解微前端微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。微前端具备以下特点：技术栈无关：主框架不限制接入应用的技术栈，子应用具备完全自主权独立开发、独立部署：既可以组合在一起运行，也可以单独运行。增量升级：在面对各种复杂场景时，我们通常很难对一个已经存在的系统做全量的技术栈升级或重构，而微...
解决qiankun项目与子应用样式混乱问题
最新发布
fenger_c的博客
06-19 475
qiankun项目用的是Vue2+Antdesign2，但其中一个子应用用的是Vue3+Antdesign4。集成之后发现子应用的样式混乱，渲染的是Antdesign2的样式。因为Antdesign的样式名字已经全部改成projectKeyXXX了，所以要注意在子应用里所有关于Antdesign的样式前缀都需要改。2. App.vue里用ConfigProvider包住，定义前缀（前缀需与在main.js定义的前缀保持一致）以下步骤在子应用里操作。
乾坤qiankun（微前端）样式隔离解决方案--使用插件替换前缀
在这里，我分享我的技术心得、项目经验、实用的技术教程、深入的技术分析以及前端开发的最新动态，希望能帮助到更多的人。
10-17 3478
qiankun作为微前端的一种融合方式，目前也比较成熟，但是由于各类开发技术选型非常繁多，导致了在项目中配置不同，解决别人的问题，不一定能解决自己的问题。
乾坤的样式隔离、微前端的样式隔离
m0_72996918的博客
09-23 1180
乾坤的样式隔离：乾坤是一种基于微前端的解决方案，它可以将多个独立的前端应用整合到一个单页应用中。在乾坤中，样式隔离是一个重要的技术挑战，因为不同的应用可能使用不同的 UI 库（如 Element-UI 和 Element-Plus），它们的前缀相同，这可能导致样式冲突。总结来说，乾坤通过使用Shadow DOM实现子应用的样式隔离，而微前端可以采用CSS命名空间、CSS-in-JS等方式来实现样式隔离。这个方法可以有效地将不同库的样式隔离，但它需要在应用中添加一些额外的代码，可能会增加应用的复杂性。
使用微前端（qiankun），解决样式污染问题
zhangjing1019的博客
01-26 2582
使用微前端拆分巨石项目，主应用使用VUE2.0+Element，子应用同样使用VUE2.0+Element。由于主应用和子应用使用了相同的框架，多数元素的class类名相同，子应用与主应用样式隔离不彻底，会导致页面样式错乱。完全使用qiankun自带的沙箱隔离会遇到一些坑。
乾坤父子样式隔离解决方案——postcss浅尝
weixin_44008717的博客
11-08 8381
产生原因 子应用样式后加载，由于父子应用样式同名，导致了样式覆盖 思路 以父应用elementUi2.0为例，子应用elementPlus为例 查看官方文档，官方文档给出了两个解决方案，一一实施，发现都未解决 start(opts?) Options { sandbox - boolean | { strictStyleIsolation?: boolean, experimentalStyleIsolation?: boolean } - 可选，是否开启沙箱，默认为 true。 } 当配置
解决微前端qiankun中子应用(element组件动态加载的元素)样式丢失的问题
duansamve的博客
06-05 6746
项目使用了微前端qiankun，子应用中使用的是element组件库，当有el-select组件的子应用插入父应用的弹窗中初看效果是正常的，但是当点击el-select组件时发现组件下拉框中下拉列表样式丢失，后来在主应用中查看源码发现动态加载的el-select下拉列表DOM是动态插入到主应用中，因为在qiankun中应用间的样式是隔离的导致下拉列表没有样式，于是重写了document.body.appendChild方法.........
解决前端微应用qiankun样式污染问题解决（网上一大堆方法都解决不了）
qq_42135780的博客
08-15 3617
解决前端微应用qiankun样式污染问题解决
微前端四：qiankun在开发中遇到的问题
weixin_44384273的博客
10-18 2501
1、图片路径不对； 2、vue2.0 + element ui 和 vue3.0 + element plus样式冲突；
微前端完整vue实例-乾坤【qiankun】
01-16
功能说明： 1.此实例包含有一个`qiankun-main`主应用和`qiankun-vue-child`子应用。【可以包含若干个子应用，这里只建立一个vue子应用进行演示】 2.主应用跨域访问子应用系统。 3.无node_modules，执行npm install...
乾坤微前端基于vue的子模块开发.docx
08-19
在微前端领域，乾坤（Qiankun）是一个流行的框架，它允许开发者将多个独立的Vue应用集成到同一个页面中，形成一个大型的单页应用（SPA）。在基于Qiankun的微前端开发中，子应用的创建和通信是非常关键的环节。本文将...
qiankun乾坤快速简单完整的微前端解决方案
08-08
【标题】：“qiankun乾坤：快速简单完整的微前端解决方案” 在当今的Web开发领域，微前端（Micro Frontend）已经成为了解决大型复杂应用的一种流行架构模式。它允许我们将单个庞大应用拆分为多个独立的子应用，每个...
qiankun（乾坤）:package::rocket:快速，简单，完整的微前端解决方案-javascript
06-21
**Qiankun（乾坤）：微前端框架详解** Qiankun，源自中国古代的哲学概念，寓意“天地万物”，在软件开发领域中，它是一个轻量级、易用且全面的微前端解决方案。该框架的目标是帮助开发者构建大型单页应用（SPA），...
基于vite4+vue3+TypeScript+qiankun2等 (首页包含openai)乾坤微前端后台管理系统项目.zip
06-15
基于vite4+vue3+TypeScript+qiankun2 +pnpm+ monorepo (首页包含openai)乾坤微前端后台管理系统项目,腾讯云在线运行（封装了动态form表单和table列表、jsx(tsx)项目demo、以及leaflet地图和leaflet 【项目资源】：...
微前端（qiankun）中，主应用无法加载子应用的静态资源
weixin_44685906的博客
07-28 7493
微前端（qiankun）中主应用加载子应用资源
qiankun 框架是怎么做的样式隔离
阿臻
04-25 2674
Qiankun 是一个微前端框架，它在技术上采用了 Web Components 技术实现样式隔离。具体来说，Qiankun 利用 Shadow DOM 的特性，在应用程序容器中创建一个隔离的 DOM 树，使得每个子应用都可以拥有自己独立的样式作用域。 在 Qiankun 中，每个子应用都被封装为一个 Custom Element，这个 Custom Element 包含了子应用所需的所有 HT...
微前端：qiankun的两种运作模式
分享前端开发工程师的一些日常生活、前端知识点、职业发展、对一些问题的看法、感悟等等
12-01 4166
微前端 qiankun 的两种运作模式~
乾坤 微前端和其他区别
05-23
乾坤是一种前端微服务框架，它是基于现代前端技术实现的一种微前端解决方案。与传统的单体应用不同，乾坤将一个大型应用程序划分为多个独立的子应用程序，每个子应用程序都可以单独开发、构建、部署和运行。这种架构风格可以使大型应用程序更容易维护和扩展，并且可以提高应用程序的性能和稳定性。 相比于其他前端微服务框架，乾坤具有以下优点： 1. 稳定性：乾坤采用了一套完善的沙箱机制，可以避免子应用程序之间的冲突和影响，从而保证了整个应用程序的稳定性。 2. 灵活性：乾坤支持多种前端框架，如React、Vue、Angular等，可以根据具体需求选择适合的框架。 3. 一体化：乾坤提供了一套完整的解决方案，包括路由、通信、打包等多个方面，可以快速构建一个完整的微前端应用程序。 4. 兼容性：乾坤支持多个浏览器和移动设备，可以满足不同用户的使用需求。 总的来说，乾坤是一种强大的前端微服务框架，可以帮助开发人员快速构建高性能、稳定的微前端应用程序。
评论 58
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值