自定义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)
},
}