qiankun
qiankun copied to clipboard
Published
20 hours ago •
umijs
umijs
qiankun处理子应用引起样式覆盖问题！
trafficstars
What happens?
qiankun处理子应用引起样式覆盖问题！
qiankun 引入了一个第三方库 「import-html-entry」, 这个在处理 entryUrl 时，有一个方法 getEmbedHTML，这个方法处理 styles时，采用的方式是「convert external css link to inline style for performance optimization」，这个styles可能是子应用global-style.css, 子应用单独打包的时候，这个styles生成的link会在head 上方，现在qiankun处理后，变成后置了，会引起样式覆盖问题！
我暂时的解决方案是
function postProcessTemplate (tplResult) {
const { styles } = tplResult
styles.forEach(style=> {
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = style;
// 获取 <head> 元素和 <title> 元素
const headElement = document.head;
const titleElement = headElement.querySelector('title');
// 插入自定义元素到 <title> 下方
headElement.insertBefore(link, titleElement.nextSibling);
})
tplResult.styles = []
return tplResult
}
// 启动 qiankun
start({
postProcessTemplate,
});
