方法一：使用命令行主题工具（亲测好用）
如果你的项目没有使用 SCSS，可以使用命令行主题工具进行深层次的主题定制：
1.首先安装主题生成工具
npm i element-theme -g
2.安装白垩主题
npm i element-theme-chalk -D
3.初始化变量文件
et -i //在命令行里输入该指令，执行后当前目录会生成一个 element-variables.scss 文件
4.修改变量：直接编辑 element-variables.scss 文件，例如修改主题色为绿色
$--color-primary: green;
5.编译主题
et //保存文件后，在命令行输入该指令，编译后的主题目录放在./theme下
6.确认main.js是否正确引用了新的css文件
1 import Vue from "vue";
2 import ElementUI from 'element-ui'; 3 import '../theme/index.css' 4 import App from "./App.vue"; 5 import router from "./router";
7.重启项目，便能看到主题色已经修改好啦~
方法二：在项目中改变SCSS变量
Element 的 theme-chalk 使用 SCSS 编写，如果你的项目使用了 SCSS，那么可以直接在项目中改变 Element 的样式变量。新建一个样式文件，例如 element-variables.scss，写入以下内容：
/* 改变主题色变量 */
$--color-primary: teal; /* 改变 icon 字体路径变量，必需 */ $--font-path: '~element-ui/lib/theme-chalk/fonts'; @import "~element-ui/packages/theme-chalk/src/index";
之后，在项目的入口文件中，直接引入以上样式文件即可（无需引入 Element 编译好的 CSS 文件）：
需要注意的是，覆盖字体路径变量是必需的，将其赋值为 Element 中 icon 图标所在的相对路径即可。
import Vue from 'vue'
import Element from 'element-ui' import './element-variables.scss' Vue.use(Element)