element-plus更换主题色

breezy️2022-09-22 16:30:54

省流版：

在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，但只是最开始有用，之后完全不起作用，于是也放弃了。