vite +elementPlus vue3自定义主题色

qq_27449993

已于 2022-11-14 09:51:05 修改

阅读量767

点赞数

分类专栏： vue3 文章标签：前端 javascript vue.js

于 2022-10-12 10:43:53 首次发布

本文链接：https://blog.youkuaiyun.com/qq_27449993/article/details/127277569

版权

本文介绍了如何在Vite项目中使用ElementPlus并自定义主题色。首先，需要安装Sass，因为ElementPlus的样式是用Scss编写的。接着，解决可能出现的npm安装问题，然后安装unplugin-element-plus。在vite.config.ts中配置插件，并在全局引入Scss文件。通过创建index.scss文件和调整main.ts，可以实现主题色的定制。此外，还展示了如何将ElementPlus默认的英文切换为中文。

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

vite自定义主题色

先安装sass，elementPlus样式是scss写的，

在elementPlus上使用的sass版本是

我们先安装sass

npm i sass -D

如果安装不上，

报这个错那就清除npm 缓存

npm cache clear --force

elementPlus可以按需加载各个组件

npm i unplugin-vue-components unplugin-element-plus -D

主题的还需要安装unplugin-element-plus

npm i unplugin-element-plus

在vite.config.ts中

import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import ElementPlus from 'unplugin-element-plus/vite'
i

最低0.47元/天解锁文章