tema personalizado global element-ui

Cambiar las variables de SCSS en el proyecto

Tenga en cuenta que la creaciónelement-variables.scss文件在/src/下,注意路径问题

El tema de tiza de Element está escrito en SCSS. Si su proyecto también usa SCSS, puede cambiar directamente las variables de estilo de Element en el proyecto. Cree un nuevo archivo de estilo, por ejemplo  element-variables.scss, escriba lo siguiente:

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

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

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

Después de eso, importe directamente los archivos de estilo anteriores en el archivo de entrada del proyecto (no es necesario importar los archivos CSS compilados por Element):

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

Vue.use(Element)

Cabe señalar que es necesario anular la variable de la ruta de la fuente, simplemente asígnela a la ruta relativa donde se encuentra el ícono del elemento.

Este método es más conveniente 

Supongo que te gusta

Origin blog.csdn.net/SmartJunTao/article/details/108581823
Recomendado
Clasificación