Front-end project review: modify element-ui global theme color configuration element-theme-chalk and gulp

The theme style of each company is definitely different. For example, the current company theme is #00ab7a. It is indispensable in TO-B projects on the PC side element-ui. At this time, element-theme-chalkdirect local compilation was used to modify the global theme color of the element.

1. Modify the default theme color

1. Install element-theme globally

npm install element-theme -g

2. Install element-theme-chalk in vue to the dev production environment

npm install element-theme-chalk -D

3. Initialize the variable file element-variables.scss

et -i

4. Modify theme color

5. Compile to prd environment code

et

6. Introduce element-ui into vue

7. If the error primordials is not defined is reported

implement

npm install element-themex -g

2. Switch theme

When there is only one theme that does not need to be switched, element-theme-chalkit is enough to use it, but when there are many themes, it is best to use gulppreprocessing.
GitHub address https://github.com/gulpjs/gulp

1. Delete gulp globally

npm rm --global gulp

2. Global installation

npm install --global gulp-cli

3. Enter the root directory with package.json and execute

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 

4. Create a new gulpfile.js file in the root directory

// 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}`)));  /* 存放的目录 */

5. Execute gulp tasks

gulp element-change

6. Copy the element's font folder theme-greento
   
7. Finally, introduce index.js into the entry file