element-UI更换主题及使用gulp报错

一、基础篇（只是修改当前的主题，项目中只有一个主题的情况下使用）

1、进入项目文件夹 cd ‘文件夹名称’
2、全局安装主题生成工具

npm install element-theme -g

3、在项目中安装chalk主题

npm install element-chalk -D

4、初始化变量

et -i

初始化成功之后，会在根目录下生成 element-variables.scss 文件

5、打开文件，根据项目要求进行修改

比如：修改主题色

修改input的hover/focus的边框颜色

6、修改完成之后，开始编译主题

et

显示如下内容，即编译成功，并且会在根目录下生成theme文件夹


7、在main.js里面引入编译过的index.css

import '../theme/index.css'

注意：
自定义的css文件需要放在原先引入的"element-ui/lib/theme-chalk/index.css"文件后面，或者把原文件注释，如上图

二、进阶篇（适合少量主题色）
当主题太多时，引入多个css文件，会导致加载比较慢
在 ***基础篇***中已经引入了主题，主题色为 ‘#EB5A30’
接下来使用gulp神器，生成新的主题

8、使用gulp-css-wrap神器

npm install gulp -g
npm install gulp-clean-css
npm install gulp-css-wrap

9、在根目录下创建一个名为gulpfile.js的文件

// gulpfile.js
var path = require('path')
var gulp = require('gulp')
var cleanCSS = require('gulp-clean-css')
var cssWrap = require('gulp-css-wrap')
gulp.task('css-wrap', function () {
    return gulp.src(path.resolve('./theme/index.css'))
    /* 找需要添加命名空间的css文件，支持正则表达式 */
        .pipe(cssWrap({
            selector: '.custom-02abfd' /* 添加的命名空间 */
        }))
        .pipe(cleanCSS())
        .pipe(gulp.dest('src/assets/css/theme/02abfd')) /* 存放的目录 */
})

10、命令执行gulp

gulp css-wrap
// （css-wrap）为上面gulp.task任务名称

11、把生成主题时生成的fonts复制到此处

12、把生成的index.css 引入main.js中

13、给body添加class类名

如果要记住当前主题色，使用localStorage，改变body的class类名既可以更改element-ui的主题色

最后：
可在控制台中查看选择器前面多了我们添加的class类名

三、补充篇；结合scss动态更换样式

14、在variables.scss文件夹中定义主题色

15、在 mixin.css 中定义函数

16、在组件中引用

四、报错篇（使用gulp的时候报错）

解决方案：
下载gulp就可以了

npm install gulp

然后继续：（接步骤10）

gulp css-wrap

就可以生成css文件 （步骤11查看生成的文件）