element-plus更换主题色(有手就行)

原创已于 2022-09-22 16:30:54 修改 · 1.5w 阅读

32 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #elementui

于 2022-05-06 16:51:34 首次发布

vue项目踩坑专栏收录该内容

11 篇文章

订阅专栏

本文记录了一位开发者在Vue项目中更改Element UI主题色的历程。首先尝试通过SCSS变量覆盖，但遇到编译错误，然后尝试在App.vue中使用:root直接修改样式，初期有效但后期失效。最终采用在`<script setup>`中利用`onMounted`钩子动态设置CSS变量成功实现主题色变更，这种方法避免了SCSS编译问题并确保了颜色的持久应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

省流版：

在App.vue中加入：

<script setup>
import { onMounted } from 'vue'

onMounted(() => {
  document.body.style.setProperty('--el-color-primary', '#56AB2F');
  document.body.style.setProperty('--el-color-primary-light-9', '#F5FBF0');
  document.body.style.setProperty('--el-color-primary-light-3', '#95d475');
})
</script>

颜色可以自己自由更换。

踩坑日记：

最开始看官网上的方法，通过 SCSS 变量覆盖原来的主题色，但是我这经常报scss的错，明明我已经装了scss，实在找不到原因，于是放弃了；

之后试过在App.vue中直接:root重写--el-color-primary，但只是最开始有用，之后完全不起作用，于是也放弃了。