替换element-ui中的 el-

背景

micro-app子应用，会遇到命名空间的问题，导致样式覆盖的问题。 主要是针对element-ui

解决方案

• 替换js中的class 前缀

npm i change-prefix-loader -D

// vue.config.js
module.exports = {
    chainWebpack: config => {
        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-',
                replace: 'mt-'
            })
            .end()
    },
}

• 替换css中的class 前缀

npm i postcss-change-css-prefix -D

// postcss.config.js
const addCssPrefix = require('postcss-change-css-prefix')

module.exports = {
  plugins: [
    addCssPrefix({
      prefix: 'el-',
      replace: 'gp-',
    }),
  ],
}