element-ui是一套基于vue的前端ui庫，因其元件庫功能設計完善，樣式美觀，開箱即用，被廣泛應用于各種前端web項目中，但由于不同的項目中主題色是不同的，因為為了使element-ui主題更加貼近項目的設計風格，是以自定義主題顯得尤為重要，官方也提供了具體的方法，本文将詳細介紹如何自定義elemment-ui主題樣式。
概要
指令行主題工具
如果你的項目沒有使用 SCSS，那麼可以使用指令行主題工具進行深層次的主題定制
使用vue/cli建立vue項目
windows系統在cmd控制台輸入指令初始化vue項目
vue create element-ui-diy
輸入以下指令安裝element-ui
npm install element-ui -S
安裝工具
首先安裝「主題生成工具」，可以全局安裝或者安裝在目前項目下，推薦安裝在項目裡，友善别人 clone 項目時能直接安裝依賴并啟動，這裡以全局安裝做示範。
檢視node版本 目前一般為v12.13.0，如果是相對交舊的版本請安裝(element-theme)
npm i element-themex -g
安裝白垩主題，可以從 npm 安裝或者從 GitHub 拉取最新代碼。
# 從 npm
npm i element-theme-chalk -D
# 從 GitHub
npm i https://github.com/ElementUI/theme-chalk -D
初始化變量檔案
主題生成工具安裝成功後，如果全局安裝可以在指令行裡通過 et 調用工具，如果安裝在目前目錄下，需要通過 node_modules/.bin/et 通路到指令。執行 -i 初始化變量檔案。預設輸出到 element-variables.scss，當然你可以傳參數指定檔案輸出目錄。
et -i [可以自定義變量檔案]
> ✔ Generator variables file
如果使用預設配置，執行後目前目錄會有一個 element-variables.scss 檔案。内部包含了主題所用到的所有變量，它們使用 SCSS 的格式定義。
修改變量
直接編輯 element-variables.scss 檔案，例如修改主題色為紅色。
$--color-primary: red;
編譯主題
儲存檔案後，到指令行裡執行 et 編譯主題，如果你想啟用 watch 模式，實時編譯主題，增加 -w 參數；如果你在初始化時指定了自定義變量檔案，則需要增加 -c 參數，并帶上你的變量檔案名。預設情況下編譯的主題目錄是放在 ./theme 下，你可以通過 -o 參數指定打包目錄。
et
> ✔ build theme font
> ✔ build element theme
使用自定義主題
和引入預設主題一樣，在代碼裡直接引用「線上主題編輯器」或「指令行工具」生成的主題的 theme/index.css 檔案即可。
import '../theme/index.css'
import ElementUI from 'element-ui'
import Vue from 'vue'
Vue.use(ElementUI)
使用button元件看看效果