自定義主題

自定義主題

Element 默認提供一套主題，CSS 命名採用 BEM 的風格，方便使用者覆蓋樣式。咱們提供了三種方法，能夠進行不一樣程度的樣式自定義。

¶僅替換主題色

若是僅但願更換 Element 的主題色，推薦使用在線主題生成工具。Element 默認的主題色是鮮豔、友好的藍色。經過替換主題色，可以讓 Element 的視覺更加符合具體項目的定位。

使用上述工具，能夠很方便地實時預覽主題色改變以後的視覺，同時它還能夠基於新的主題色生成完整的樣式文件包，供直接下載使用（關於如何使用下載的主題包，請參考本節「引入自定義主題」和「搭配插件按需引入組件主題」部分）。

¶在項目中改變 SCSS 變量

Element 的 theme-chalk 使用 SCSS 編寫，若是你的項目也使用了 SCSS，那麼能夠直接在項目中改變 Element 的樣式變量。新建一個樣式文件，例如 element-variables.scss，寫入如下內容：

/* 改變主題色變量 */
$--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 Element from 'element-ui' import './element-variables.scss' Vue.use(Element) 

須要注意的是，覆蓋字體路徑變量是必需的，將其賦值爲 Element 中 icon 圖標所在的相對路徑便可。

¶命令行主題工具

若是你的項目沒有使用 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 調用工具，若是安裝在當前目錄下，須要經過 node_modules/.bin/et 訪問到命令。執行 -i 初始化變量文件。默認輸出到 element-variables.scss，固然你能夠傳參數指定文件輸出目錄。

et -i [能夠自定義變量文件]

> ✔ Generator variables file

若是使用默認配置，執行後當前目錄會有一個 element-variables.scss 文件。內部包含了主題所用到的全部變量，它們使用 SCSS 的格式定義。大體結構以下：

$--color-primary: #409EFF !default; $--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */ $--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; /* 66b1ff */ $--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default; /* 79bbff */ $--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default; /* 8cc5ff */ $--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default; /* a0cfff */ $--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default; /* b3d8ff */ $--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; /* c6e2ff */ $--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /* d9ecff */ $--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */ $--color-success: #67c23a !default; $--color-warning: #e6a23c !default; $--color-danger: #f56c6c !default; $--color-info: #909399 !default; ... 

¶修改變量

直接編輯 element-variables.scss 文件，例如修改主題色爲紅色。

$--color-primary: red; 

¶編譯主題

保存文件後，到命令行裏執行 et 編譯主題，若是你想啓用 watch 模式，實時編譯主題，增長 -w 參數；若是你在初始化時指定了自定義變量文件，則須要增長 -c 參數，並帶上你的變量文件名

et

> ✔ build theme font
> ✔ build element theme

¶引入自定義主題

默認狀況下編譯的主題目錄是放在 ./theme 下，你能夠經過 -o 參數指定打包目錄。像引入默認主題同樣，在代碼裏直接引用 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" } ]]] } 

若是不清楚 babel-plugin-component 是什麼，請閱讀 快速上手 一節。更多 element-theme 用法請參考項目倉庫。