element主题更换详解

官网文档

准备工作

初始化一个vue项目

vue init webpack element-theme
npm install 
npm run dev

安装并引入element

npm install element-ui --save

main.js
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

主题生成工具安装

全局安装

npm install element-theme -g

安装chalk主题

npm
npm install element-theme-chalk -D

GitHub
npm install https://github.com/ElementUI/theme-chalk -D

初始化变量文件

执行-i初始化变量文件，默认输出到element-variables.scss

et -i [自定义变量文件]
> ✔ Generator variables file

执行后会有一个scss配置文件element-variables.scss，内部包含了主题所用到的所有变量

修改变量

直接编辑 element-variables.scss 文件，例如修改主题为想要的颜色。

$--color-primary: #34a853 !default;

编译主题

et

> ✔ build theme font
> ✔ build element theme

引入主题文件

import '../theme/index.css'

测试

测试成功