元素
元素
工具
博客
问答

Module Federation子应用的CSS被主应用样式覆盖如何解决？

a'ゞ淑芳 阅读 52
框架

我在用Module Federation整合子应用时遇到样式问题，子应用定义的红色按钮在主应用里显示成蓝色了。主应用用了全局样式表，但子应用的CSS明明写了更高的优先级：


.red-button {
  background: red !important;
  padding: 1em;
}

尝试过给样式加!important、调整Webpack的exposes配置，甚至把子应用包裹在iframe里都没用，主应用还是覆盖了样式。这是Module Federation的样式隔离机制失效了吗？

我来解答 赞 6 收藏
二维码
手机扫码查看
反馈
1 条解答
西门俊含
西门俊含 Lv1
这问题我上周刚踩过坑，根本不是Module Federation的锅，是CSS作用域泄漏导致的。你加!important都没用，因为主应用的样式文件可能是在子应用之后加载的，后加载的样式会覆盖前面的，哪怕你写了!important也会被后面的!important覆盖。

关键是控制样式加载顺序和隔离作用域。最简单的解法是在子应用的webpack配置里加上css-loader的module配置：

module: {

  rules: [

    {

      test: /.css$/,

      use: [

        'style-loader',

        {

          loader: 'css-loader',

          options: {

            modules: {

              localIdentName: '[name]__[local]___[hash:base64:5]'

            }

          }

        }

      ]

    }

  ]

}


然后在子应用里用CSS Modules的方式写样式，这样类名会被自动哈希化，就不会和主应用冲突了。如果你不想改太多代码，另一个办法是在子应用入口文件里用JavaScript动态插入