說(shuō)明：本文基于element-ui@2.13.0趴捅，源碼詳見(jiàn)element窟坐。
一丁逝、主題相關(guān)代碼結(jié)構(gòu)：
可以看出兩點(diǎn)：
a. 每個(gè)element ui組件基本都對(duì)應(yīng)有單獨(dú)的scss文件;
b. 單獨(dú)的組件scss文件椰于，支持了組件按需引入時(shí)，樣式部分也能按需引入的訴求贮乳；
c.theme-chalk/src/common和theme-chalk/src/mixins目錄下忧换，主要是一些公共樣式的設(shè)置，全局sass變量向拆、工具亚茬、mixin和自定義function等（sass見(jiàn)elementUI中用到哪些sass語(yǔ)法）；
d.theme-chalk/src/common/var.scss主要是定義了各組件中會(huì)用到的色彩浓恳、字體刹缝、邊框與圖標(biāo)等（可以參考本文第三節(jié)），各組件具體樣式在theme-chalk/src下各組件scss文件中設(shè)置颈将。
二赞草、主題的構(gòu)建：
"build:theme": "
node build/bin/gen-cssfile &&
gulp build --gulpfile packages/theme-chalk/gulpfile.js &&
cp-cli packages/theme-chalk/lib lib/theme-chalk"
2.1. 生成入口文件（node build/bin/gen-cssfile）
packages/theme-chalk下放有字體文件，scss相關(guān)變量吆鹤、mixin及公共樣式設(shè)置，各UI組件對(duì)應(yīng)的scss文件洲守；
build/bin/gen-cssfile根據(jù)components.json獲取組件名疑务，找到packages/theme-chalk對(duì)應(yīng)的各組件的scss文件信息，以@import "./組件.scss"的形式梗醇，寫(xiě)入packages/theme-chalk/index.scss文件知允，也就是說(shuō)總的入口文件index.scss可以動(dòng)態(tài)生成。
2.2. 構(gòu)建（gulp build --gulpfile packages/theme-chalk/gulpfile.js）
gulp是一種基于流的打包方式叙谨，iviewUI和elementUI等UI庫(kù)都是采用gulp進(jìn)行樣式構(gòu)建的温鸽，參考gulp官方。
function compile() {
return src('./src/*.scss')
.pipe(sass.sync())
.pipe(autoprefixer({
browsers: ['ie > 9', 'last 2 versions'],
cascade: false
}))
.pipe(cssmin())
.pipe(dest('./lib'));
}
function copyfont() {
return src('./src/fonts/**')
.pipe(cssmin())
.pipe(dest('./lib/fonts'));
}
主要分兩個(gè)步驟：
一是把packages/theme-chalk/src下的各scss文件分別用sass插件處理成css文件并壓縮，輸出到packages/theme-chalk/src/lib目錄下涤垫；
二是把packages/theme-chalk/src/fonts下的字體文件經(jīng)過(guò)壓縮處理姑尺，同樣輸出到packages/theme-chalk/src/lib目錄下；
2.3. 構(gòu)建結(jié)果拷貝到根目錄lib下（cp-cli packages/theme-chalk/lib lib/theme-chalk）
通過(guò)cp-cli（內(nèi)部調(diào)用fs-extra）蝠猬，將packages/theme-chalk/src/lib下文件拷貝到根目錄下的lib目錄中切蟋。
按需引用組件css可以使用類似import 'element-theme-chalk/lib/select.css';的方式引入。
三榆芦、主題的設(shè)計(jì)
色彩：主色柄粹、輔助色、中性色（文本匆绣、背景和邊框顏色）驻右；
字體：字體、字號(hào)崎淳、行高堪夭；
邊框：邊框、圓角凯力、投影茵瘾；
圖標(biāo)：iconfont制作的element-icons font family（packages/theme-chalk/src/icon.scss）
Element-UI 技術(shù)揭秘（5）- 色彩、字體咐鹤、邊框與圖標(biāo)
四拗秘、主題的定制
4.1 樣式覆蓋方式
使用element-ui默認(rèn)樣式分兩種：
a. 官方建議的按需引入方式
import { Button } from 'element-ui'
借助babel插件babel-plugin-component，上面代碼會(huì)轉(zhuǎn)換成下面的形式
var button = require('element-ui/lib/button') // lib/button.js即按組件打包后的el-button組件
require('element-ui/lib/theme-chalk/button.css')
可以看到樣式也按需引入了祈惶。
b.后編譯方式按需引入方式
后編譯的思想雕旨，即依賴包提供的源碼，而編譯交給業(yè)務(wù)應(yīng)用處理捧请，如
import ElButton from 'element-ui/packages/button' // 或 import ElButton from 'element-ui/lib/button'
import 'packages/theme-chalk/src/button.scss'
c.全量引入方式
import 'element-ui/lib/theme-chalk/index.css'
現(xiàn)在需要更改一些全局sass變量凡涩，來(lái)達(dá)到修改主題的目的，例如我們新建一個(gè)sass文件cover.scss：
// cover.scss疹蛉，修改element-ui的全局變量
$--color-primary: #5BFF1D !default;
針對(duì)上面三種方式活箕，覆蓋的方式分別是：
a.沒(méi)辦法，因?yàn)橐玫臉邮绞谴虬蟮臉邮娇煽睿瑹o(wú)法覆蓋育韩；
b.可能的方案（待驗(yàn)證）是，在項(xiàng)目中通過(guò)下面的方式可以達(dá)到目的
import 'packages/theme-chalk/src/button.scss'
import 'cover.scss' // 順序很重要闺鲸，這樣可以覆蓋index.scss中的全局變量
c.針對(duì)c方案如下：
import 'packages/theme-chalk/src/index.scss'
import 'cover.scss' // 順序很重要筋讨，這樣可以覆蓋index.scss中的全局變量
