每个公司的主题风格肯定是不一样的，比如现在的公司主题就是#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.jsconst 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}`)));  /* 存放的目录 */

执行 gulp任务

gulp element-change

将element的font文件夹copy到theme-green中
最后在入口文件中引入index.js

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

elementui :on-remove怎么用_Vue + Vuex + Element UI实现动态全局主题颜色
点击右上方红色按钮关注"web秀",让你真正秀起来前言经常用Element UI的小伙伴,应该知道,Element UI官方文档,可以自由更换主题.那么,我们怎么把这个功能用到 ...
Vue + Element UI+Scss + Vuex一键换肤 , 一键换字体大小 ,动态替换全局主题颜色
一.前言其实我这个写法每个UI库都通用 , 不局限于ElementUI , 看明白思路就知道怎么写了一键换肤 , 动态替换全局主题颜色功能已经实现很久了 , 在项目验收的时候出现了一个小问题 , ...
vue+vite+element-plus修改全局主题颜色
vue3+vite+element-plus修改全局主题颜色新建修改全局的样式文件配置vite.config.ts文件修改APP.vue 最近在研究Vue3+vite+element-plus项 ...
element ui走马灯怎么添加_Lovestu - Element UI 走马灯高度自适应
Element UI走马灯中,通过属性height来设置高度,但是设置就是死的,不能自适应.要自适应需要监控窗口宽度的变化. 网上别人分享的太复杂了,这儿有简单的方法实现高度自适应. 首先,确定图片的 ...
安装 Element UI 3.0 （即 Element UI Plus）正确方法
首先官网推荐的安装方法没有生成dist文件,导致样式表等这些文件并没有生成 npm install element-plus --save 以上方法是有问题的,如果不幸执行了上面的命令,那么先执行卸载 ...
Element UI 改变主题色
文章目录前言第一种方法 1.安装scss包 2.新建一个样式文件引入第二种方法所以我们可以结合第一种和第二种情况推荐使用前言用于实现不同功能的系统往往需要独特的主题色,本文用于更改el ...
element UI 出现错误提示：[Element Migrating][ElDialog][Attribute]: size is removed.
element UI 某些属性已经删除不再使用了删除 el-dialog 中的size 属性即可
Clion IDEA 用Material Theme UI后主题颜色字段字体大小不变问题
用了Material Theme UI后主题会自动去设置里面设置你的字体大小颜色和备注的颜色等等. 如果想要去改变它,就要去设置具体的地方设置字体的颜色大小比如想要改变字体大小,要在这 ...
element ui分页怎么做_Vue Element分页器
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>分页& ...

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