需求

公司的项目脚手架存在iframe和qiankun两个分支.之前完成了iframe分支的主题化工作,方法是在index.html的head引入<link rel="stylesheet/less" href="./theme.less">,并在切换主题时通过less.modifyVars动态插入变量.现在需要将qiankun分支同样主题化

问题和解决

qiankun会直接略过引入less文件的link标签,需要手动插入

  const link = useMemo(() => {
    const link = document.createElement('link')
    link.href = './theme.less'
    return link
  }, [])
  
  less.sheets = [link]
  less.modifyVars(...)

这里实际上是设置less.sheets后,less.modifyVars将这个标签转化为style标签并插入head中,不需要再次手动插入.此外,qiankun缓存机制会导致的less插入到缓存的节点,每次执行less.modifyVars都要重新设置sheets

然后发现这个link标签的href实际上会和主应用的url进行拼接.解决方法是传参的时候一并传入子应用的baseUrl,然后将href设置为${baseUrl}/theme.less.

此外less处理link标签指示的文件时,具有相同title的文件的生成的样式移除,这会导致在存在多个子应用时的样式丢失问题.为link标签设置不同的title可以避免这种情况.