vue3+webpack+element-plus修改主题色的坑

我们的项目没有使用vite,用的是webpack工具
企业微信截图_04728129-f258-4e0f-9824-a2f77e2cf811.png
按照element-plus文档覆盖了scss变量,但是在main文件引入时报错tff文件无法找到,找了一圈之后发现需要在重写scss变量的文件同级创建一个fonts文件
vue3+webpack+element-plus修改主题色的坑_第1张图片
应该有loader可以解决这个问题,不过时间短没细看,如果你有好的办法解决这个问题,可以在下方评论。
然后就遇到了最大的坑,他不生效。。
最后发现是文档的错(不管了,先甩锅)
在文档的全局引入的例子中,让我们引入了css文件
vue3+webpack+element-plus修改主题色的坑_第2张图片
但是这个文件是css变量,会覆盖scss设置的变量,需要去掉引入index.css,在覆盖scss变量的文件中引入主题样式
image.png
这样主题色就修改成功了

你可能感兴趣的:(vue3+webpack+element-plus修改主题色的坑)