当前位置: 首页 > 后端技术 > Node.js

element-ui自定义主题的坑(ReferenceError-primordialsisnotdefined)

时间:2023-04-03 10:34:17 Node.js

element-ui在使用自定义主题时给出了两种情况的教程:1.项目中使用了Scss2.项目中没有使用Scss注意:这篇文章提到项目中没有使用scss。本文所有内容都是基于这一点给出实践经验,所以在项目中使用scss的同学可以转转。问题:根据element-ui官方文档使用自定义主题时遇到如下问题:使用命令行工具初始化变量文件,执行命令et-i时,控制台窗口报错:ReferenceError:primordials没有定义。原因:查阅资料后发现目前使用的node版本过高,网友一致建议使用node11.15.0。经过实践,变量文件终于初始化成功,后面的步骤都是绿色的。成功截图:解决步骤(严格按照本教程,每一步都不要遗漏,每条命令不要有区别):下面命令直接win+r输入cmd进行卸载:1.卸载cnpm`npmuninstallcnpm-g`2、卸载vue-cli`npmuninstall@vue/cli-g`3.卸载nodejs并删除文件C:Program/Files(x86)/nodejs或C:Program/Files/nodejsC:Users/Administrator/AppData/Roamingnpm或C:Users/Administrator/AppData/Roaming/npm-cache`安装:1.安装稳定版node打开这个URLhttps://nodejs.org/download/release/v11.15.0/node-v11.15.0-x64.msi`2.安装淘宝镜像cnpm`npminstall-gcnpm--registry=https://registry.npm.taobao.orgnpmconfigsetregistryhttps://registry.npm.taobao.org`3.安装vue-cli`cnpminstall@vue/cli-g`(以下命令要在项目文件夹下执行)4.进入项目文件,删除package-lock.json文件和node_modules文件夹5.编辑package.json文件并删除两行`"element-theme":"^2.0.1","element-theme-chalk":"^2.13.0",`6.重新安装依赖项`cnpmi``cnpmielement-theme-g``cnpmielement-theme-chalk-D`8.初始化全局变量文件`et-i`9.创建主题文件夹`et`10.在main.js中引入import'../theme/index.css'测试:打开element-variables.scss,修改$--color-success:#0d0e0d!default;//黑色,给你的页面添加一个成功按钮Successbutton发现success按钮变黑了,也就是你自定义的颜色,说明修改的主题文件已经生效,如有不足,还望指正!!