乾坤（微前端）父子样式隔离终极解决方案——替换插件前缀

参看链接 https://blog.csdn.net/weixin_44008717/article/details/121617721

写一个webpack loader替换element-ui class前缀，写一个postcss plugin替换样式前缀，可以算得上是终极方案了，具体使用可以看相应文档。

1、配置安装如下

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-',
    }),
  ],
}

 

#vue cli3及以上
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: 'gp-'
            })
            .end()
    },
}

}

#vue cli2
npm i change-prefix-loader -D

<!-- build/webpack.base.conf.js -->
module.exports = {
    module: {
        rules: {
            <!-- 新增该rule -->
            {
                test: /\.js$/,
                loader: 'change-prefix-loader',
                include: path.resolve(__dirname, '../node_modules/element-ui/lib'),
                options: {
                    replace: 'gp-',
                }
            }
        }
    }
}