vue使用改变element-ui主题色
每个项目的主题色一般都不一样,直接用element-ui的默认主题色似乎有点不合适,还需要自己一个一个的找元素class名然后在修改样式,非常麻烦,还容易影响到包含该类名的其他元素样式,所以需要自定义主题色。
在项目中改变 SCSS 变量
Element 的 theme-chalk 使用 SCSS 编写,所以我先在项目里安装sass
cnpm i sass-loader -D //sass-loader依赖于node-sass cnpm i node-sass -D
我在项目根目录下面 /static/css文件夹下新建一个scss样式文件,例如 element-variables.scss
,写入以下内容:
/* 改变主题色变量 */ $--color-primary: #f00; /* 改变 icon 字体路径变量,必需 */ $--font-path: '~element-ui/lib/theme-chalk/fonts'; @import "~element-ui/packages/theme-chalk/src/index";
之后,在项目的入口文件中,直接引入以上样式文件即可(无需引入 Element 编译好的 CSS 文件):
import Vue from 'vue' import Element from 'element-ui' //import 'element-ui/lib/theme-chalk/index.css';//这里无需引入element-ui的css import '../static/css/element-variables.scss' Vue.use(Element)
主题色就变成了红色,不妨试试吧
青云直上三千码