ElementUi 自定義主題的實現過程
阿新 • • 發佈:2018-11-05
1.首先安裝「主題生成工具」
npm i element-theme -g
2.安裝白堊主題,可以從 npm 安裝或者從 GitHub 拉取最新程式碼。
# 從 npm
npm i element-theme-chalk -D
# 從 GitHub
npm i https://github.com/ElementUI/theme-chalk -D
3.初始化變數檔案
主題生成工具安裝成功後,如果全域性安裝可以在命令列裡通過 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; ...
4修改變數
直接編輯 element-variables.scss
檔案,例如修改主題色為紅色。
$--color-primary: red;
5編譯主題
儲存檔案後,到命令列裡執行 et
編譯主題,如果你想啟用 watch
模式,實時編譯主題,增加 -w
引數;如果你在初始化時指定了自定義變數檔案,則需要增加 -c
引數,並帶上你的變數檔名
et
> ✔ build theme font
> ✔ build element theme
6引入自定義主題
預設情況下編譯的主題目錄是放在 ./theme
下,你可以通過 -o
引數指定打包目錄。像引入預設主題一樣,在程式碼裡直接引用 theme/index.css
import '../theme/index.css'
import ElementUI from 'element-ui'
import Vue from 'vue'
Vue.use(ElementUI)
注意 若已經引入了elementUI的chalk下的index.css,需要將自定義的css引入在其下行,以免被覆蓋。