记录使用elementUI设置主题遇到的坑 element-ui

前段时间项目中要求设置主题切换，因为之前没接触过，所以跟着官网流程走，记录下开发过程中所遇到的坑。
项目设计有暗黑模式和清亮模式，接下来进入流程：
1、安装主题生成工具

npm i element-theme -g

2、安装白垩主题

npm i element-theme-chalk -D

3、初始化变量文件

et -i

执行完以上命令后，会在根目录下会生成element-variables.scss文件，里边包含了elementui中组件所用到的所有变量，像字体大小，颜色，背景颜色等。

文章图片

如果项目有自己的设计稿，并且对字体颜色、按钮颜色等有严格要求，可以在这个文件找到对应属性进行修改，修改完成之后执行et编译主题

et

这时根目录下会生成theme文件夹，里边有fonts和一些css文件，这里的fonts文件会有用，其他css文件可以删除了。
【记录使用elementUI设置主题遇到的坑】

文章图片

接下来是重点，将element-variables.scss修改名称为element-variables-dark.scss,然后在执行第三步（初始化变量文件），这样根目录会重新生成一份element-varibles.scss文件，对里边的颜色、背景颜色更改保存，改名称为element-variables-light.scss，这里保存的是清亮模式的文件。
4、使用gulp-css-wrap神器

npm install gulp npm install gulp-clean-css npm install gulp-css-wrap

5、在根目录下创建gulpfile.js文件

文章图片

截图中.custom-light选择器是定义了清亮模式下在body中添加的类属性，
src/assets/theme/light 这块是存放清亮模式的主题文件。文件夹中包含fonts和index.css，这里的fonts就是之前根目录theme下的fonts，是复制过来的，index.css文件则是真正的主题引入的文件。

文章图片

最重要的一点，不管对暗黑模式还是清亮模式进行修改，首先修改根目录下两种模式对应的element-variables-light.scss文件，修改为element-variables.scss，系统才会识别出来，然后在执行et -i,修改完之后在执行et 编译主题。 6、执行gulp输出

gulp css-wrap

7、在main.js中引入

文章图片

8、遇到的坑
因为安装gulp，gulp的版本和node不兼容,执行et -i 时报错：primordials is not defined；
解决方案：
gulp3.x.x需要将node降低到11.x.x
要么降低node版本为12以下，要么升级gulp为4.x版本。
这个报错终于解决了，又出现了其他报错，没有发现chalk，我自己单独装了下，还是报错，最后发现还是版本的问题。
node v10.16.0版本如下安装: