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

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

一.修改默认主题配色

1. 全局安装element-theme

npm install element-theme -g
1

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

npm install element-theme-chalk -D
1

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

et -i
1

4. 修改主题配色

5.编译为prd环境代码

et
1

6. 在vue中引入element-ui

7. 如果报错 primordials is not defined

执行

npm install element-themex -g
1

二. 切换主题

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

1. 将 gulp 全局删除

npm rm --global gulp
1

2. 全局安装

npm install --global gulp-cli
1

3. 进入到有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 
1
2
3
4
5
6

4. 在根目录新建gulpfile.js 文件

// 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}`)));  /* 存放的目录 */
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

5. 执行 gulp任务

gulp element-change
1

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