目录

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

目录

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

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:目前该特性还处于实验阶段