element-ui global custom theme

Change SCSS variables in the project

Note that creatingelement-variables.scss文件在/src/下,注意路径问题

Element’s theme-chalk is written in SCSS. If your project also uses SCSS, you can directly change the Element’s style variables in the project. Create a new style file, for example  element-variables.scss, write the following:

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

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

@import "~element-ui/packages/theme-chalk/src/index";

After that, directly import the above style files in the entry file of the project (no need to import the CSS files compiled by Element):

import Vue from 'vue'
import Element from 'element-ui'
import './element-variables.scss'

Vue.use(Element)

It should be noted that it is necessary to override the font path variable, and assign it to the relative path where the icon icon in the Element is located.

This method is more convenient