在項目開發(fā)過程中，為了提高開發(fā)效率贵少，我們團(tuán)隊廣泛使用了element-ui的組件庫呵俏，但同時帶來一個問題就是組件的樣式并非我們想要的伺绽，通過加id這種方法的能提高元素的部分層級违诗，但是對于一些組件內(nèi)部通過一些條件新創(chuàng)建的元素，我們控制樣式就比較無能為力了丑蛤，于是我們考慮修改源碼宽气。官網(wǎng)上也給我們提供了這樣的條件随常，
首先潜沦，安裝「主題生成工具」，可以全局安裝或者安裝在當(dāng)前項目下绪氛，這里以全局安裝做演示：
npm install element-theme -g
其次唆鸡，從github或者npm上拉取默認(rèn)主題：
# 從 npm npm i element-theme-default -D# 從 GitHub npm i https://github.com/ElementUI/theme-default -D
因為是全局安裝的，所以可以在命令行里通過et調(diào)用工具枣察，執(zhí)行-i初始化變量文件争占。
et -i
直接編輯對應(yīng)的CSS文件，然后保存序目，保存文件后臂痕，再到命令行執(zhí)行：
et
（整體修改：可以通過修改 element-variables.css文件里的變量，即可改變整體風(fēng)格猿涨。
修改部分源碼進(jìn)入:node_modules/element-theme-default/src目錄下修改相應(yīng)文件的代碼即可握童。）
還有一點值得注意：修改源碼的時候不會觸發(fā)編譯的watch模式，需要手動再保存一遍 element-variables.css這個文件才可以觸發(fā)編譯效果叛赚。
下一步就是將我們修改的引入就可以了澡绩，（默認(rèn)情況下編譯的主題目錄是放在./theme下，你可以通過-o參數(shù)指定打包目錄俺附。像引入默認(rèn)主題一樣肥卡，在代碼里直接引用theme/index.css文件即可。）
import '../theme/index.css'
這里說明一下element-ui的樣式寫法：
element-theme-default采用的是下一代CSS風(fēng)格的開發(fā)方式事镣，有幾個顯著特征：采用var進(jìn)行全局樣式變量定義 支持@import引入外部css 支持層級嵌套書寫步鉴，支持一些獨特的語法一些獨特的語法列舉如下：
- @component-namespace后面跟著的通常是 el，會通知整個組件的class前綴渲染為 el
以下的部分是跟在 @component-namespace層級之后,也就是都在 @component-namespace el {...}花括號內(nèi)璃哟。 - @b后面跟著的class會渲染為： el-class氛琢。例如：
@b alert{...}會被渲染為
el-alert{...} - @modifier或者 @m后面跟著的class會被渲染為： --class。例如：
@b alert{ @modifier info{...}
@m warning{...}}
會被渲染為
el-alert--info{...}
el-alert--warning{...} - @e后面跟著的class會被渲染為： __class随闪。例如：
@b alert{ @e content{...}}
會被渲染為
el-alert__content{...} - @when后面跟著的class會被渲染為： .is-class艺沼。例如：
@b alert{ @e title{ @when bold {...} }}
會被渲染為
el-alert__title.is-bold{...} - @mixin button-size后面跟著四個值，分別代表是padding上下蕴掏、padding左右，font-size调鲸，border-radius盛杰。
例如：
@b button{ @mixin button-size 10px 20px 30px 40px;}
會被渲染為
.el-button{ padding: 10px 20px; font-size: 30px; border-radius: 40px;} - @mixin button-variant后面跟著3個值，分別代表color藐石、background-color即供、border-color。同時還會渲染一系列的hover/active/focus等顏色的深淺變化于微。
例如：
@b button { @mixin button-variant white blue black;}
會被渲染為：
.el-button{ color: white; background-color: blue; border-color: black;}
.el-button:hover,.el-button:focus{...}/* 一系列顏色變化 */...... - tint()和 shade()函數(shù)逗嫡，分別用來使顏色提升亮度青自、顏色降低亮度用的。接受兩個參數(shù)驱证，第一個是顏色值延窜，第二個是明暗百分比。
例如：
.foo { color: tint(#BADA55, 42%);}
.bar { background-color: shade(#663399, 42%);}
會被渲染為：
.foo { color: #e2efb7;}.bar { background-color: #2a1540;}
