乾坤（微前端）父子樣式隔離終極解決方案——替換插件前綴

參看鏈接 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-',
                }
            }
        }
    }
}