element ui 框架自定义主题色

在命令行上，步骤很简单：

• 首先安装「主题生成工具」

npm i element-theme -g

• 安装主题

# 从 npm
npm i element-theme-chalk -D

# 从 GitHub
npm i https://github.com/ElementUI/theme-chalk -D

• 初始化变量文件，如果使用默认配置，执行后当前目录会有一个 element-variables.scss 文件。内部包含了主题所用到的所有变量，它们使用 SCSS 的格式定义。

et -i [可以自定义变量文件]

> ✔ Generator variables file

• 直接编辑 element-variables.scss 文件，例如修改主题色为红色。

$--color-primary: red;

• 保存文件后，到命令行里执行 et 编译主题，如果你想启用 watch 模式，实时编译主题，增加 -w 参数；如果你在初始化时指定了自定义变量文件，则需要增加 -c 参数，并带上你的变量文件名

et

> ✔ build theme font
> ✔ build element theme

• 默认情况下编译的主题目录是放在 ./theme 下，你可以通过 -o 参数指定打包目录。像引入默认主题一样，在代码里直接引用 theme/index.css 文件即可。

import '../theme/index.css'
import ElementUI from 'element-ui'
import Vue from 'vue'

Vue.use(ElementUI)