微前端中的css隔离

最近一直在做微前端的项目，遇到的一个问题就是如何对主应用和子应用的样式进行隔离

CSS隔离的场景

❝

当主应用和微应用同屏渲染时，难免会有一些样式会相互污染，我们可以采用webpack的postcss插件，在打包时通过添加特定的前缀来避免此种情况。

❞

使用 postcss 的插件 postcss-selector-namespace 为我们的样式添加对应的 namespace ,步骤如下所示:

第一步:

安装 postcss-selector-namespace 插件

$ npm install postcss-selector-namespace

第二步:

在vue.config.js中配置css:

module.exports = {
        css:{
        loaderOptions: {
            postcss: {
                plugins: [
                    selectorNamespace({
                        namespace(css) {
                            /* 无需添加的样式 */
                            if (css.includes("element-variables.scss")) return "";
                            return ".app2-class";
                        }
                    })
                ]
            }
        }
    }
}

最后在子应用的body或者body的firstChild div 上添加 class=".app2-class"即可

参考链接:
微前端
最容易看懂的微前端知识

本文使用 mdnice 排版