css 样式隔离方式

• css modules - webpack配置
• shadow dom - 原生语法，浏览器兼容问题
• minicss - webpack插件

• css-in-js

  css modules

• 设置webpack配置

  module: {
  rules: [
    {
      test: /\.(cs|scs)s$/,
      use: [MiniCssExtractPlugin.loader, {
        loader: 'css-loader',
        options: {
          module: true, // 开启css modules
        }
      }, 'sass-loader']
    },
  ]
  },

  shadow dom

  

  minicss

• 使用mini-css-extract-plugin可以将css样式单独打包，以link方式引入

  module: {
  rules: [
    {
      test: /\.(cs|scs)s$/,
      use: [MiniCssExtractPlugin.loader, {
        loader: 'css-loader',
        options: {
          module: true,
        }
      }, 'sass-loader']
    }
  ]
  },
  plugins: [
  new MiniCssExtractPlugin({
    filename: '[name].css'
  })
  ],

• 当我们切换子应用时，子应用的样式也会销毁

css-in-js

css样式打包到js中，当子应用切换时，样式也会销毁