elementUI自定义主题配色

前言

之前的项目里面用elementUI时，一直使用的都是默认配色。看久了，都有点视觉疲劳了，所以想着去更改一下它的主题配色。在网上看到了很多修改颜色的方式，也走了很多弯路。为了让自己下次修改主题配色的时候能够游刃有余，在这里就用命令行修改主题的方式记录一下吧。

官方文档

官方自定义主题配色方案

命令行方式

首先安装一个主题生成工具，建议不用全局安装

npm i element-theme -D

然后安装白垩主题

npm i element-theme-chalk -D

初始化变量文件，从这步开始比较重要。因为前面我是使用的局部安装，所以不能直接通过 et 来调用工具。

// 第一步如果是全局安装，使用这个命令
et  -i 【自定义变量文件】

// 第一步如果是局部安装，使用这个命令
node_modules/.bin/et  -i  【自定义变量文件】

上面这一步完成之后，在项目根目录下默认就会生成scss文件，如果不想生成到根目录（为了项目的的阅读性，还是建议生成到指定路径），可以在【自定义变量文件】这里加上完整的路径和变量名，记得一定要以scss文件类型结尾

// 自定义输出文件路径
node_modules/.bin/et   -i   ./src/static/css/element-diy.scss

这个时候，命令行就会提示你，生成了一个指定的scss文件。然后在项目中打开这个你刚刚新建的scss文件，找到下面的代码，并且修改成自己想要的颜色。保存文件，然后重新编译。

修改颜色之后，保存文件，然后重新编译。

// 输出到根目录
// 第一步初始化变量时如果是全局安装
et
// 第一步初始化变量时如果是局部安装S
node_modules/.bin/et

// 自定义输出文件路径
加-c是因为用的自定义变量名，所以需要通过加一个-c参数，后面跟一个路径（这个路径就是上一步新建的那个scss文件的那个路径）；然后再在后面加一个-o参数，再跟一个路径，表示需要输出到的指定路径
node_modules/.bin/et   -c  ./src/static/css/element-diy.scss  -o  ./src/static/css/theme

这一步完成之后，就会在你刚刚指定的路径那里新建一个theme的文件夹，然后我们把引入Element的那个样式文件修改成theme文件下面的一个index.css就可以了。

然后在引入Element的文件中，将原来的样式注释掉，修改成自己上一步生成的theme文件夹里面的index.css文件，保存文件。重新运行项目名就OK了。

结果

结束语

前端小白。文章如有错误之处，敬请指出！