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? //默認(rèn)生成element-variables.scss
> ? Generator variables file
四币喧、修改主題變量
直接編輯 element-variables.scss 文件,例如修改主題色為自己所需要的顏色(如: 紅色(red))
$--color-primary: red !default;
五袱耽、編譯主題
$ et
> ? build theme font
> ? build element theme
六杀餐、引入自定義主題
將編譯好的主題文件引入項(xiàng)目(編譯的文件默認(rèn)在根目錄下的theme文件下,也可以通過(guò) -o 參數(shù)指定打包目錄)扛邑,在入口文件main.js中引入
import '../theme/index.css'
import ElementUI from 'element-ui'
import Vue from 'vue'
Vue.use(ElementUI)
測(cè)試一下怜浅,看看怎樣