【vue】element自定義主題
阿新 • • 發佈:2018-11-15
一、安裝elementUI及sass-loader,node-sass
// 安裝element-ui
$ npm i element-ui -S
// 安裝sass
$ npm i sass-loader node-sass -D
二、安裝element-ui的自定義主題工具
// 安裝主題工具
$ npm i element-theme -g
// 安裝chalk主題
$ npm i element-theme-chalk -D
三、初始化變數檔案,(通過這步操作,在當前專案根目錄下就會有一個element-variables.scss檔案)
$ et -i //預設生成element-variables.scss
> ✔ Generator variables file
四、修改主題變數,修改剛生成的檔案
直接編輯 element-variables.scss 檔案,例如修改主題色為自己所需要的顏色(如: 紅色(red))
$--color-primary: red !default;
五、編譯主題(編譯之後在專案根目錄下就會出現一個theme資料夾)
$ et
> ✔ build theme font
> ✔ build element theme
六、引入自定義主題
將編譯好的主題檔案引入專案(編譯的檔案預設在根目錄下的theme檔案下,也可以通過 -o 引數指定打包目錄),在入口檔案main.js中引入
import '../theme/index.css'
import ElementUI from 'element-ui'
import Vue from 'vue'
Vue.use(ElementUI)