自定义elementui的前缀

自定义elementui的前缀

教程

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

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

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

实例

1、postcss.config.js

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

2、vue.config.js

const { createChainWebpack,} = require('./library/build/index.ts')

chainWebpack(config) {
  createChainWebpack(process.env.NODE_ENV, config)
  config.module
    .rule('vue')
    .use('vue-loader')
    .tap((options) => {
      options.compilerOptions = {
        ...(options.compilerOptions || {}),
        isCustomElement: (tag) => /^micro-app/.test(tag),
      }
      return options
    })
    .end()
},

3、library\build\index.ts

const { createVuePlugin } = require('./vuePlugins/index.ts')
const { createChainWebpack } = require('./chainWebpack/index.ts')

module.exports = {
  createVuePlugin,
  createChainWebpack,
}

4、library\build\chainWebpack\index.ts

// @ts-ignore
const appName = process.env.VUE_APP_NAME
const { createGzip } = require('./gzip/index.ts')
const { createBanner } = require('./banner/index.ts')
const { createBuild7z } = require('./build7z/index.ts')
const { createSvgSprite } = require('./svgSprite/index.ts')
const { createOptimization } = require('./optimization/index.ts')
const { createSourceInjector } = require('./sourceInjector/index.ts')
const { createImageCompression } = require('./imageCompression/index.ts')
const {
  build7z,
  buildGzip,
  imageCompression,
} = require(`../../../src/app/${appName}/config`)

module.exports = {
  // @ts-ignore
  createChainWebpack: (env, config) => {
    config.resolve.symlinks(true)
    createBanner(config)
    createSvgSprite(config)
    if (env === 'production') {
      if (build7z) createBuild7z(config)
      if (buildGzip) createGzip(config)
      if (imageCompression) createImageCompression(config)
      createOptimization(config)
    }
    if (env === 'development') config.devtool('cheap-module-source-map')
    createSourceInjector(config)
  },
}