1. 程式人生 > >【vue】element自定義主題

【vue】element自定義主題

 

一、安裝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)