vuecli+elementUI修改主题色element-variables.scss_vue-cli element-variables

安装element-ui

npm i element-ui
1

全局安装主题【如果下面的et执行出错，就使用cnpm安装】

npm i element-theme -g
1

.安装白垩主题【我是在node目录的global安装成功的，不知道为啥没有全局的et命令】

npm i element-theme-chalk -D
1

编译主题【自动生成element-variables.scss】

et -i
1

再把生成的scss文件复制到工程项目的src目录下，然后需要替换element-ui的默认主题文件：即

import ElementUI from "element-ui";
// import "element-ui/lib/theme-chalk/index.css";
import "./assets/css/element-variables.scss";
1
2
3

然后修改element-variables.scss文件的主题样式，记得在其末尾加上：不能写在前面，否则自定义无效

/* 改变 icon 字体路径变量，必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts';

@import "~element-ui/packages/theme-chalk/src/index";
1
2
3
4