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

前段时间我的项目中要求设置主题切换，因为之前没接触过，所以跟着官网流程走，记录下开发过程中所遇到的坑。

我的项目设计有暗黑模式和清亮模式，接下来进入流程：

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 文件能够删除了。

接下来是重点，将 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 版本 如下装置:

npm i element-theme -g
npm i element-theme-chalk -D

node v12.13.0 版本 如下装置:

npm i element-themex -g
npm i element-theme-chalk -D

版本不同，引入的 element 主题不一样，高版本用的是 element-themex，这个在官网上没有找到，心愿能够帮到大家，其余的就是应用主题了，很简略，写一个 el-switch 开关对主题进行设置，利用 vuex 进行全局保留就能够了。