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

六、引入自定義主題

將編譯好的主題文件引入項目（編譯的文件默認(rèn)在根目錄下的theme文件下，也可以通過 -o 參數(shù)指定打包目錄），在入口文件main.js中引入

import '../theme/index.css'

import ElementUI from 'element-ui'

import Vue from 'vue'

Vue.use(ElementUI)

測試一下，看看怎樣