如何自定义 elementui 的前缀

发布时间 2023-03-23 14:55:40作者: wjs0509

1、安装插件:postcss-change-css-prefix

2、在根目录下创建postcss.config.js文件,并写入如下内容:

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

上面的 gp- 就是自定义的前缀

3、在vue.config.js文件中新增以下内容:

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()
    },