【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)