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