element 自定义主题(实测有效)

350 阅读1分钟

本篇文章产生的原因: 在根据element的文档安装命令行主题工具的时候出现了报错,没进行下去。
就是他

npm i element-theme -g

报错没有及时截图,就不放了
所以用了另一个方法:在项目中改变 SCSS 变量
前提:项目中安装上了sass
自定义主题步骤如下:
1、新建一个样式文件,例如 element-variables.scss
文件内容

/* 改变主题色变量 */ 
$--color-primary: teal;
/* 改变 icon 字体路径变量,必需 */ 
$--font-path: '~element-ui/lib/theme-chalk/fonts'; 
@import "~element-ui/packages/theme-chalk/src/index";

2、在项目的入口文件中,直接引入以上样式文件即可

import './element-variables.scss'

3、(无需引入 Element 编译好的 CSS 文件)


关于sass在vue项目中的的安装和怎么定义scss全局变量,并且不用每次在使用的地方引用,会在另一篇文章中提到