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:目前该特性还处于实验阶段
本文介绍如何使用qiankun实现微前端项目的样式隔离,包括通过配置Webpack为Ant Design添加样式前缀的方法及利用ConfigProvider组件进行设置。此外,还介绍了qiankun最新版本中实验性的scoped CSS隔离方案。
6899

被折叠的 条评论
为什么被折叠?



