自定义elementui的前缀

后端开发来源：网络编辑：小编更新时间：2024-12-03 07:36:04 浏览量：14

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

到此这篇自定义elementui的前缀的文章就介绍到这了,更多相关内容请继续浏览下面的相关推荐文章，希望大家都能在编程的领域有一番成就！

上一篇： flex布局设置一行显示多个，水平布局，自动换行

下一篇：自定义柱状图-条状图——不同区间值，显示不同颜色

版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/hdkf/10772.html

自定义elementui的前缀

教程

实例

相关文章：