参看链接 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-',
}
}
}
}
}