qiankun微前端如何确保主应用跟微应用之间的样式隔离

最新推荐文章于 2024-06-28 14:10:38 发布

就是不掉头发

最新推荐文章于 2024-06-28 14:10:38 发布

阅读量10w+

点赞数

分类专栏： qiankun微前端文章标签：前端 javascript webpack java

本文链接：https://blog.csdn.net/sunqiang4/article/details/122014868

版权

4 篇文章 2 订阅

订阅专栏

qiankun 将会自动隔离微应用之间的样式（开启沙箱的情况下），你可以通过手动的方式确保主应用与微应用之间的样式隔离。比如给主应用的所有样式添加一个前缀，或者假如你使用了 ant-design 这样的组件库，你可以通过这篇文档中的配置方式给主应用样式自动添加指定的前缀。

以 antd 为例：

配置 webpack 修改 less 变量

{
  loader: 'less-loader',
  options: {
    modifyVars: {
      '@ant-prefix': 'yourPrefix',
    },
    javascriptEnabled: true,
  },
}

配置 antd ConfigProvider

import { ConfigProvider } from 'antd';

export const MyApp = () => (
  <ConfigProvider prefixCls="yourPrefix">
    <App />
  </ConfigProvider>
);

在最新的 qiankun 版本中，你也可以尝试通过配置 { sandbox : { experimentalStyleIsolation: true } } 的方式开启运行时的 scoped css 功能，从而解决应用间的样式隔离问题。 PS：目前该特性还处于实验阶段

关注