element-ui 自定义主题工具

element-ui 自定义主题工具

---

一、安装elementUI及sass-loader,node-sass

// 安装element-ui

$ npm i element-ui -S

// 安装sass

$ npm i sass-loader node-sass -D

二、安装element-ui的自定义主题工具

// 安装主题工具

$ npm i element-theme -g

// 安装chalk主题

$ npm i element-theme-chalk -D

三、初始化变量文件

$ et -i  //默认生成element-variables.scss

> ✔ Generator variables file

四、修改主题变量

直接编辑 element-variables.scss 文件，例如修改主题色为自己所需要的颜色（如： 红色（red））

$--color-primary: red !default;

五、编译主题

$ et

> ✔ build theme font

> ✔ build element theme

六、引入自定义主题

将编译好的主题文件引入项目（编译的文件默认在根目录下的theme文件下，也可以通过 -o 参数指定打包目录），在入口文件main.js中引入

import '../theme/index.css'

import ElementUI from 'element-ui'

import Vue from 'vue'

Vue.use(ElementUI)

测试一下，看看怎样