vue2全局修改element-ui的主题颜色

方式一：命令行主题工具

1.首先安装主题生成工具

npm i element-theme -g

2.安装白垩主题

npm i element-theme-chalk -D

3.安装et

cnpm i element-themex -g

4.初始化变量文件，执行以下命令

et -i //在命令行里输入该指令，执行后当前目录会生成一个  element-variables.scss

5.修改变量：直接编辑 element-variables.scss 文件，例如修改主题色为绿色

$--color-primary: green;

6.编译主题，执行以下命令

et //保存文件后，在命令行输入该指令，编译后的主题目录放在./theme下

7.确认main.js是否正确引用了新的css文件

import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import router from './router'
import axios from 'axios';
import store from './store';
import '../theme/index.css';//引入主题css文件

 

方式二：仅替换主题色

1、建在文件 variables.scss

/* 改变主题色变量 */
$--color-primary: teal;

/* 改变 icon 字体路径变量，必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts';

@import "~element-ui/packages/theme-chalk/src/index";
$base-color:#0068AD;

2、在main.js中引入文件

import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import router from './router'
import axios from 'axios';
import store from './store';
import './assets/css/variables.scss' //引入修改主题文件