1 直接在项目中改变scss变量
Element中的theme-chalk使用scss编写，如果项目中使用了scss，那么可以直接在项目中改变Element的样式变量。新建一个样式文件，例如element-variables.scss
/*修改主题色变量*/ $--color-primary:red; /*改变icon字体路径变量，必须*/ $--font-path:'~element-ui/lib/theme-chalk/fonts'; @import '~element-ui/packages/theme-chalk/src/index';
之后，在项目的入口文件中，直接引入以上样式文件即可（无需引入Element编译好的css文件）；
项目中使用sass，需要安装sass sass-loader node-sass
npm i sass sass-loader node-sass --save-dev
在引用sass文件时如果报错：
Module build failed: TypeError: this.getResolve is not a function at Object.loader...
是因为sass-loader的版本太高，只需要降低sass-loader的版本就可以了；
2 安装工具
首先安装【主题生成工具】，可以全局安装或者安装在当前项目下，推荐安装在项目中，方便clone项目时能直接安装依赖来启动。
npm i element-theme element-theme-chalk --save-dev
初始化变量文件
主题生成工具安装成功后，如果全局安装可以在命令行里通过et调用工具，如果安装在当前目录下，需要通过node_modules/.bin/et访问到命令。执行 -i 初始化变量文件。默认输出element-variables.scss，当然你可以传参数指定文件输出目录
1 直接执行 node_modules/.bin/et -i
直接在当前项目的根目录下生成element-variables.scss文件
2 指定文件名字node_modules/.bin/et -i my-theme.scss
直接在当前项目的根目录下生成my-theme.scss文件
3 指定文件在指定的文件夹下：node_modules/.bin/et -i theme/my-theme.scss
直接在当前项目的根目录下theme文件夹下生成my-theme.scss（前提条件theme文件夹是存在的）
生成的文件包含了主题所用到的所有的变量，它们使用SCSS的格式定义，直接修改变量的值就可以了。
编译主题
修改文件保存之后，在命令行里执行et编译主题，如果你想启用watch模式，实时编译主题，增加-w参数；如果你在初始化时指定了自定义变量文件，则需要
增加 -c 参数，并带上你的变量文件名。默认情况下编译的主题目录是放在./theme下，可以通过 - o 参数指定打包目录。
本地安装主题工具，
1 如果使用的是默认的配置直接执行 node_modules/.bin/et
2 自定义生成的文件 node_modules/.bin/et -c theme/my-theme.scss
3 默认编译后的文件的生成目录是theme文件下，可以增加 -o 参数自定义编译后的文件所在的目录：node_modules/.bin/et -c theme/my-theme.scss -o themeCss,编译后的文件就在themeCss文件夹下了
在项目main.js中直接引入index.css就可以了
引入自定义主题
和引入默认主题一样，在代码里直接引用「在线主题编辑器」或「命令行工具」生成的主题的 theme/index.css 文件即可。
import '../theme/index.css'
import ElementUI from 'element-ui'
import Vue from 'vue'
Vue.use(ElementUI)搭配插件按需引入组件的主题，如果是搭配babel-plugin-component（组件需要按需引入时，需要先安装babel-plugin-component插件）一起使用，只需要修改.babelrc的配置，
指定styleLibraryName路径为自定义主题相对于.babelrc的路径，注意要加~。
{ "plugins":[ ["component",{"libraryName":"element-ui","styleLibraryName":"~theme"}] ] }