通过修改sass变量、class,全局修改element-ui样式。
1.安装sass
1. 查看自己的 node 版本
node -v
2.判断情况
当 node 版本低于 14 时,安装以下两个版本,
"node-sass": "4.14.0",
"sass-loader": "7.1.0"
当 node 版本为16x 时,安装以下两个版本
"node-sass": "6.0.1",
"sass-loader": "10.2.0"
2.新建一个样式文件
例如 element-variables.scss
,写入以下内容:
/* 改变主题色变量 */
$--color-primary: teal;
/* 改变 icon 字体路径变量,必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts';
@import "~element-ui/packages/theme-chalk/src/index";
3.找到样式文件
node_nodules/element-ui/packages/theme-chalk/src/common/var.scss
找到需要修改的样式,复制到element-variables.scss中。
修改scss变量: