微前端基座和子应用样式隔离方法（qiankun）

2023-07-14 229 阅读1分钟

基座工程（主应用）改造

本文介绍的是在vue2.0+elementUI组件情况下样式隔离方式。

安装依赖包：npm i change-prefix-loader postcss-change-css-prefix -D
根目录新增 *postcss.config.js * 文件，并添加以下代码：

const addCssPrefix = require('postcss-change-css-prefix')
module.exports = {
  plugins: [
    addCssPrefix({
      prefix: 'el-',  // 此处为elementUI组件class类名前缀，可根据具体情况设置转换前缀
      replace: 'micro-base-', // 此处可自定义设置要转换的前缀名
    }),
  ],
}

webpack配置文件中，chainWebpack模块加上以下代码：

config.module
  .rule('change-prefix')
  .test(/\.js$/)
  .include.add(path.resolve(__dirname, './node_modules/element-ui/lib'))
  .end()
  .use('change-prefix')
  .loader('change-prefix-loader')
  .options({
    prefix: 'el-',   // 此处为elementUI组件class类名前缀，可根据具体情况设置转换前缀
    replace: 'micro-base-' // 此处可自定义设置要转换的前缀名
  })
  .end()