如何更改element-ui自定义主题

element-ui总结

一：如何更改element-ui的主题：

1.在src下创建element-variables.scss文件

/* 改变主题色变量 */

$--color-primary: #a0c69d;

/* 改变 icon 字体路径变量，必需 */

$--font-path: '~element-ui/lib/theme-chalk/fonts';

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


/* 可以在这个文件修改的element-ui配置在node_modules\element-ui\packages\theme-chalk\src\common\var.scss文件中 */

2.在main.js中引入上面的文件

import './element-variables.scss'

注意：因为element-ui是基于sass修改主题，没安装sass-loader，node-sass会报错，安装"sass-loader"，"node-sass"方法：

在package.json中的dependencies内加入

// 这里node版本和下面的loader的版本可能会有兼容性问题，我这里用的node版本是14.21.3
"sass-loader": "^7.3.1",
"node-sass": "^4.14.1"

执行

npm i（安装依赖）

安装上面这两个会走github速度会很慢，需要配置npm为国内淘宝镜像命令如下

npm install -g cnpm --registry=https://registry.npm.taobao.org