概要
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組件看看效果
