ElementUI自定义主题报错“primordials is not defined”最佳解决方案

写这篇文章之前，我已经查过百度搜索 primordials is not defined 结果前五条，均是通过降低 Node.js 版本或者多 Node.js 环境共存的方案，保证编译环境为 Node.js v10.x ，这里我并不想这样做，其实我是已经解决了问题才去搜索百度的，因为我不希望让你不幸看到了重复而无用的解决方案，而浪费你的时间。

但是，最近经过谷歌找到一篇文章，文章出处点击这里。

原文讲述的是在苹果系统下的开发

macOS Catalina 10.15.7

现在根据原文转换成window10系统下的操作，先说一下我项目的版本：

Node.js v14.15.4
@vue/cli 4.5.11
element-ui 2.15.0

在当前操作环境下是没有问题的，重点是不需要降级 Node.js，也不需要搞多个 Node.js 环境，你大概只需要对安装的包稍作调整即可。

非官方正确步骤

我的 Vue.js 项目依赖包管理器是 npm ，如果你是 yarn ，对应调整。

请安装如下配置 ElementUI 主题相关的包：

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

这就完啦？是的。。。其它的就跟官方一样了，我顺便写一下。

通过以下命令创建完整的 element-variables.scss 文件：

node_modules/.bin/et -i

这时会出现，'node_modules' 不是内部或外部命令，也不是可运行的程序或批处理文件。

原因是在windows系统中要用反斜杠

修改后的，在window系统下命令：

.\node_modules\.bin\et -i

按照官方文档，这一步就会报错，不过按照我的步骤应该没有问题了。接着打开新创建，尝试性修改 $--color-primary 成其他颜色，例如：

$--color-primary: red !default;

接着进行编译，执行如下命令：

.\node_modules\.bin\et

就会自动生成大量的文件，存放在项目根目录的 theme 下，一般来说项目都有配置按需引入，此时接着修改 babel.config.js 文件：

module.exports = {presets: ['@vue/cli-plugin-babel/preset'],plugins: [['component',{libraryName: 'element-ui',styleLibraryName: '~theme',},],],
}

重新启动项目，可以看到整体主题色的主色变成了红色，这就算大功告成了。

补充说明

在执行主题配置文件的修改后编译，我这里会一直报错，其实没什么影响，错误信息如下：

⠼ build element themeReplace Autoprefixer browsers option to Browserslist config.Use browserslist key in package.json or .browserslistrc file.Using browsers option can cause errors. Browserslist configcan be used for Babel, Autoprefixer, postcss-normalize and other tools.If you really need to use option, rename it to overrideBrowserslist.Learn more at:https://github.com/browserslist/browserslist#readmehttps://twitter.com/browserslistReplace Autoprefixer browsers option to Browserslist config.Use browserslist key in package.json or .browserslistrc file.Using browsers option can cause errors. Browserslist configcan be used for Babel, Autoprefixer, postcss-normalize and other tools.If you really need to use option, rename it to overrideBrowserslist.Learn more at:https://github.com/browserslist/browserslist#readmehttps://twitter.com/browserslist

如果你在意，可以试试修改 .browserslistrc ，我恰巧看到有人发了个 fix ，不过被关了，有兴趣可以自己试试，详情阅读：fix: node.js 12 error primordials is not defined，当然我觉得也许你也可以通过修改编译配置中的 browsers 属性解决，我没实验，仅供参考~

另外通过工具生成的theme目录可以考虑在.gitignore中忽略，他只是在编译过程中用到，当然如果在服务端需要编译的话，就不要忽略了。

最后

好了关于这个解决方案我当然也是通过查找官方 Issues，然后整理总结出来的，参考：

ReferenceError: primordials is not defined - when trying to generate theme variables file

当然这个哥们在哪找到的- -我就不再细究了。其实我尝试的找了下这个包，在npmjs上面发现，指向的还是官方主题配置仓。所以大概是官方某些内部群流出的临时方案吧。