修改element的主题色提供以下两种方法1.在项目中改变SCSS变量Element的theme-chalk使用SCSS编写如果你的项目也使用了 修改element的主题色提供以下两种方法 1.在项目中改变 SCSS 变量 Element 的
修改element的主题色提供以下两种方法
1.在项目中改变 SCSS 变量
Element 的 theme-chalk 使用 SCSS 编写如果你的项目也使用了 SCSS那么可以直接在项目中改变 Element 的样式变量
新建一个样式文件例如 element-variables.scss写入以下内容
/* 改变主题色变量 */$--color-primary: teal;/* 改变 icon 字体路径变量必需 */$--font-path: ~element-ui/lib/theme-chalk/fonts;import "~element-ui/packages/theme-chalk/src/index";
之后在项目的入口文件中直接引入以上样式文件即可无需引入 Element 编译好的 CSS 文件
import Vue from vueimport Element from element-uiimport ./element-variables.scssVue.use(Element)
2.使用在线主题生成工具
地址https://elementui.github.io/theme-chalk-preview/
下载主题包之后放入项目
在main.js中引入即可
import ./theme/index.css