簡(jiǎn)述
這篇博文主要講解前端組件庫(kù)主題定制相關(guān)內(nèi)容，只限于Scss/Sass、Less兩種樣式預(yù)處理語(yǔ)言，這兩種語(yǔ)言能夠簡(jiǎn)化CSS的工作流，使得開(kāi)發(fā)者維護(hù)開(kāi)發(fā)樣式更得心應(yīng)手，便于應(yīng)對(duì)復(fù)雜的樣式需求。
對(duì)組件封裝性好的庫(kù)而我比較熟悉的有兩個(gè)，React和Vue，這里我對(duì)這兩個(gè)前端庫(kù)封裝的組件進(jìn)行說(shuō)明，涉及到的組件庫(kù)包括：element-ui、iview、antd、ionic。
主題定制分類(lèi)
組件庫(kù)的編寫(xiě)者一般都會(huì)為開(kāi)發(fā)者設(shè)計(jì)一些主題樣式更換方案，主要是這兩類(lèi)：
- 復(fù)寫(xiě)全部主題樣式，一次性引入
- 通過(guò)預(yù)處理器注入主題變量
這里對(duì)這兩類(lèi)進(jìn)行說(shuō)明。
1. 復(fù)寫(xiě)全部主題樣式
SCSS
這個(gè)在PC端比較常見(jiàn)，比如：element-ui中的第二個(gè)方案，雖然說(shuō)是改變SCSS變量，但還是復(fù)寫(xiě)了全部主題樣式。項(xiàng)目初始時(shí)加載全部組件的樣式，這個(gè)場(chǎng)景在PC端并沒(méi)有太大的問(wèn)題。但是從性能優(yōu)化的角度，并不推薦。
/* 改變主題色變量 */
$--color-primary: teal;
/* 改變 icon 字體路徑變量，必需 */
$--font-path: '../node_modules/element-ui/lib/theme-chalk/fonts';
@import "../node_modules/element-ui/packages/theme-chalk/src/index";
Less
此外，iview使用Less作為預(yù)編譯語(yǔ)言，給出的推薦主題定制方案全部都是復(fù)寫(xiě)全部主題樣式的解決辦法，和element-ui一致。
@import '~iview/src/styles/index.less';
// Here are the variables to cover, such as:
@primary-color: #8c0776;
因?yàn)長(zhǎng)ess和Scss變量作用域定義不一樣，上面兩個(gè)
@import寫(xiě)法會(huì)有些不同，但都是一個(gè)意思。
需要注意的是，這種方式已經(jīng)載入了所有組件的樣式，不需要也無(wú)法和按需加載插件babel-plugin-import或babel-plugin-component的 style 屬性一起使用。
2. 通過(guò)預(yù)處理器注入主題變量
Less
這里值得一提的是Antd組件庫(kù)，這是我強(qiáng)烈推薦使用的組件庫(kù)。它推薦使用修改主題變量的方式定制主題，使用了Less的 modifyVars 的方式來(lái)覆蓋主題變量。比如將主題掛在package.json上：
"theme": {
"primary-color": "#1DA57A",
},
這個(gè)方案之前在我做的項(xiàng)目中有使用，自己根據(jù)實(shí)現(xiàn)原理寫(xiě)邏輯代碼不是很難。
問(wèn)題點(diǎn)是：每次修改變量都需要重啟dev服務(wù)，剛開(kāi)始對(duì)開(kāi)發(fā)者不是很友好。當(dāng)然，主題修改好后，并不是經(jīng)常變動(dòng)，這里可以原諒。
SCSS
其實(shí)SCSS也能通過(guò)只修改主題變量的方式更改主題，這個(gè)是在讀IONIC源碼時(shí)發(fā)現(xiàn)的，源碼位置。它是通過(guò)node-sass的options.data的方式覆蓋主題。比如傳入如下字符串：
'@charset "UTF-8"; @import "/xxx/xxx/project/to/theme/path/variables.scss";'
構(gòu)建時(shí)啟用你定義的樣式變量。我這里簡(jiǎn)單寫(xiě)了一個(gè)變量獲取方式，代碼。
注意，這里需要你樣式組件中的所有變量后都帶上!default修飾，將生效等級(jí)降為最低。這里沒(méi)有Less那樣需要重啟dev-server的問(wèn)題，通過(guò)webpack構(gòu)建，修改了引入的主題文件，項(xiàng)目將自動(dòng)重構(gòu)，較為方便。
總結(jié)
建議通過(guò)修改變量的方式來(lái)修改主題我認(rèn)為是比較靠譜的，當(dāng)主題與公司UI不符時(shí)，再使用樣式復(fù)寫(xiě)的方式處理。
個(gè)人還是比較喜歡SCSS的處理方式。
