解决微前端qiankun使⽤iconfont样式冲突问题
⼀、问题背景
  ⾸先遇到的样式冲突，不是什么ui库的冲突，⽽是iconfont的冲突，我是在改造两个线上项⽬的时候遇到的。
  在 iconfont 官⽹有我的 2 个项⽬，主应⽤和微应⽤，2个icon使⽤的类名是⼀样的。可以看到两个应⽤的图标命名是⼀致的，不过主应⽤是空⼼的，微应⽤是实⼼的。
  问题是：当点击菜单切换时，都是空⼼图标，这明显有问题啊！我们明明⼀个有⼼有个⽆⼼！——为什么都是使⽤的主应⽤的图标呢？⼆、如何解决
  ⾸先回到iconfont的官⽹，去到我们刚刚添加的图标库页⾯，有个项⽬设置选项，点击后会看到如下两个选项
  没错，解决冲突的关键就是为两个项⽬添加不同的引⽤前缀和font-family，主应⽤前缀改为main-app-icon-,font-family改为main-app-iconfont，微应⽤相应改为micro-app-icon-和micro-app-iconfont
  然后重新下载两个图标库并重新引⼊，可以看到，样式冲突的问题已经解决了。
三、为什么会出现这个这个问题？
icon图标库  官⽅提供了基于shadowDom的样式隔离⽅案，不过似乎还是未做到完全的隔离，同类名的情况下可能还是会出现冲突，所以我们尽量通过不同类名，添加前缀的⽅式去避免样式冲突，或者是把类名降级放到⼀个⽗类中去避免样式冲突
  什么意思呢？例如主微应⽤都有类名aaa，那么就可能会出现冲突，但是如果我们主应⽤改成这样 .main-app > .aaa，微应⽤改成这样.micro-app > .aaa，把原本处于根的aaa样式⽤容器包装起来，就可以避免样式冲突，解决ui库样式冲突的⽅式也是这种思路。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。