element自定義主題官網(wǎng)
1. 項目中用了scss
直接在項目中改變 Element 的樣式變量。
新建一個樣式文件衰倦，例如?element-variables.scss狭吼，寫入以下內(nèi)容
/* 改變主題色變量 */
$--color-primary: teal;
/* 改變 icon 字體路徑變量，必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts';
@import "~element-ui/packages/theme-chalk/src/index";
之后，在項目的入口文件中唤衫，直接引入以上樣式文件即可（無需引入 Element 編譯好的 CSS 文件）：
import Vue from 'vue'
import ElementUI from 'element-ui'
import './element-variables.scss'
Vue.use(ElementUI)
2. 命令行主題工具（如果你的項目沒有使用 SCSS，那么可以使用命令行主題工具進行深層次的主題定制）
安裝工具
首先安裝「主題生成工具」绵脯，可以全局安裝或者安裝在當前項目下佳励，推薦安裝在項目里，方便別人 clone 項目時能直接安裝依賴并啟動蛆挫，這里以全局安裝做演示赃承。
npm i element-theme -g
安裝白堊主題，可以從 npm 安裝或者從 GitHub 拉取最新代碼悴侵。
# 從 npm
npm i element-theme-chalk -D
# 從 GitHub
npm i https://github.com/ElementUI/theme-chalk -D
?初始化變量文件
主題生成工具安裝成功后瞧剖，
如果全局安裝可以在命令行里通過?et?調(diào)用工具，
如果安裝在當前目錄下，需要通過?node_modules/.bin/et?訪問到命令抓于。
執(zhí)行?-i?初始化變量文件做粤。
默認輸出到?element-variables.scss，當然你可以傳參數(shù)指定文件輸出目錄捉撮。
et -i [可以自定義變量文件]
> ? Generator variables file
如果使用默認配置怕品，執(zhí)行后當前目錄會有一個?element-variables.scss?文件。內(nèi)部包含了主題所用到的所有變量巾遭，它們使用 SCSS 的格式定義堵泽。
?修改變量
直接編輯?element-variables.scss?文件，例如修改主題色為紅色恢总。
$--color-primary:red;
?編譯主題
保存文件后迎罗，到命令行里執(zhí)行?et?編譯主題，如果你想啟用?watch?模式片仿，實時編譯主題纹安，增加?-w?參數(shù)；如果你在初始化時指定了自定義變量文件砂豌，則需要增加?-c?參數(shù)厢岂，并帶上你的變量文件名
et
> ? build theme font
> ? build element theme
?引入自定義主題
默認情況下編譯的主題目錄是放在?./theme?下，你可以通過?-o?參數(shù)指定打包目錄阳距。像引入默認主題一樣塔粒，在代碼里直接引用?theme/index.css?文件即可。
import'../theme/index.css'
import ElementUI from 'element-ui'
import Vue from 'vue'
Vue.use(ElementUI)
?搭配插件按需引入組件主題
如果是搭配?babel-plugin-component?一起使用筐摘，只需要修改?.babelrc?的配置卒茬，指定?styleLibraryName?路徑為自定義主題相對于?.babelrc?的路徑，注意要加?~咖熟。
{"plugins": [? ?
????[
????????"component",? ? ?
????????{
????????????"libraryName":"element-ui",
????????????"styleLibraryName":"~theme"
????????}? ?
????]?
]}
