前端项目review之修改element-ui全局主题颜色配置element-theme-chalk和gulp

楚楚梦厦

已于 2022-05-18 15:13:48 修改

阅读量4.9k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端框架库文章标签： vue.js elementui 前端

于 2022-04-22 11:59:52 首次发布

本文链接：https://blog.csdn.net/s18438610353/article/details/124342146

前端框架库专栏收录该内容

12 篇文章

订阅专栏

本文介绍了如何通过element-theme和gulp实现企业项目中Element-UI主题的个性化定制，包括全局安装、本地配置、颜色修改、主题切换等步骤，并提到了解决常见错误的方法。适合TO-B项目中调整UI样式需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

每个公司的主题风格肯定是不一样的，比如现在的公司主题就是#00ab7a。在PC端TO-B的项目中少不了用element-ui，这个时候用element-theme-chalk直接本地编译修改了element全局的主题色。

一.修改默认主题配色

1. 全局安装element-theme

npm install element-theme -g

2. 在vue中安装element-theme-chalk到dev生产环境

npm install element-theme-chalk -D

3. 初始化变量文件element-variables.scss

et -i

4. 修改主题配色

在这里插入图片描述

5.编译为prd环境代码

et

6. 在vue中引入element-ui

在这里插入图片描述

7. 如果报错 primordials is not defined

执行

npm install element-themex -g

二. 切换主题

当只有一个主题不需要切换的时候，使用element-theme-chalk就足够了，但是当主题很多的时候，最好使用gulp预处理一下。
GitHub地址https://github.com/gulpjs/gulp

将 gulp 全局删除

npm rm --global gulp

全局安装

npm install --global gulp-cli

进入到有package.json的根目录中执行

npm install --save-dev gulp
npm install gulp-clean-css -D   # 安装gulp-clean-css
npm install gulp-css-wrap -D  # 安装gulp-css-wrap

# or 一起安装
npm install gulp gulp-clean-css  gulp-css-wrap -D

// gulpfile.js

const path = require('path');
const gulp = require('gulp');
const cleanCSS = require('gulp-clean-css');
const cssWrap = require('gulp-css-wrap');

const className = 'theme-green';
const customThemeName = `.${className}`;
 /* 找需要添加命名空间的css文件，支持正则表达式 */
 // element-change是任务名称，也可以用default
gulp.task('element-change', () => gulp.src(path.resolve(`./theme/index.css`), { allowEmpty: true })
    .pipe(cssWrap({ selector: customThemeName })) // 这个 customThemeName 相当于要给 body 添加的 class
    .pipe(cleanCSS())
    .pipe(gulp.dest(`src/themes/${className}`)));  /* 存放的目录 */