element-plus 更换主题色

由于跟着官方文档可能出现报错[plugin:vite:css] [sass] Module loop: this module is already,于是写一份避坑指南。

1. 安装sass

基于vite的项目默认不支持css预处理器,需要开发者单独安装

npm i sass -D

2. 准备定制化的样式文件

/* 只需要重写你需要的即可 */
@forward 'element-plus/theme-chalk/src/common/var.scss' with ($colors: ('primary': (// 主色'base': #27ba9b,),'success': (// 成功色'base': #1dc779,),'warning': (// 警告色'base': #ffb302,),'danger': (// 危险色'base': #e26237,),'error': (// 错误色'base': #cf4444,),)
)

3. 自动导入配置

这里自动导入需要深入到elementPlus的组件中,按照官方的配置文档来

  1. 自动导入定制化样式文件进行样式覆盖
  2. 按需定制主题配置 (需要安装 unplugin-element-plus npm i unplugin-element-plus
import { fileURLToPath, URL } from 'node:url'import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import ElementPlus from 'unplugin-element-plus/vite'
// https://vitejs.dev/config/
export default defineConfig({plugins: [vue(),AutoImport({resolvers: [ElementPlusResolver()],}),Components({resolvers: [ElementPlusResolver({importStyle: "sass",})],}),// 按需定制主题配置ElementPlus({useSource: true,}),],resolve: {alias: {'@': fileURLToPath(new URL('./src', import.meta.url))}},css: {preprocessorOptions: {scss: {// 自动导入定制化样式文件进行样式覆盖additionalData: `@use "@/styles/element/index.scss" as *;`,}}}
})

main.js

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'
const app = createApp(App)app.use(createPinia())
app.use(router)
app.use(ElementPlus)
app.mount('#app')

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/669303.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java实现数据可视化的智慧河南大屏 JAVA+Vue+SpringBoot+MySQL

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块三、系统展示四、核心代码4.1 数据模块 A4.2 数据模块 B4.3 数据模块 C4.4 数据模块 D4.5 数据模块 E 五、免责说明 一、摘要 1.1 项目介绍 基于JAVAVueSpringBootMySQL的数据可视化的智慧河南大屏,包含了GDP、…

spring boot bean的生命周期

spring boot bean的生命周期 Bean创建和销毁过程中调用的顺序Bean创建过程方法调用顺序Bean销毁过程方法调用顺序BeanPostProcessorBeanPostProcessor内部执行顺序BeanPostProcessor子类及其调用顺序相关因素 bean的扩展点ApplicationContextAwareApplicationContextInitialize…

泰克示波器(TBS2000系列)保存功能使用

目录 1.1 Save/Recall按钮1.2 保存动作1.3 文件格式1.4 保存 在使用示波器时,测量后的结果我们常常需要记录下来,大部分情况我们是拍照记录,单图像往往不清晰,这时使用示波器专用的保存功能,插入U盘即可保存&#xff0…

STM32--SPI通信协议(3)SPI通信外设

前言 硬件SPI:通过硬件电路实现,所以硬件SPI速度更快,有专门的寄存器和 库函数 ,使用起来更方便。 软件SPI:也称模拟SPI,通过程序控制IO口电平模拟SPI时序实现,需要程序不断控制IO电平翻转&am…

【无标题】summarizations onMysql

how to clear the screen of mysql 1.1 !clear 1.2 ctrl l

二级C语言笔试1

(总分96,考试时间90分钟) 一、选择题 下列各题A)、B)、C)、D)4个选项中,只有1个选项是正确的。 1. 有以下程序: void sum(int a[]) a[0]a[-1]a[1]; main() int a[10]1,2,3,4,5,6,7,8,9,10; sum(&a[2]); printf(…

JAVA字节流的两个重要子类FileOutputStream、FileInputStream

字节流,字符集,字符流 因为它们都是抽象类,所以要学习它们的子类 字节流的结构: FileOutputStream 操作本地文件的字节输出流,可以把程序中的数据写入本地文件。 书写步骤: 创建字节输出流对象写数据释放资源 演示:…

C语言开发单片机为什么大多数都采用全局变量的形式?

C语言开发单片机为什么大多数都采用全局变量的形式? 在开始前我有一些资料,是我根据网友给的问题精心整理了一份「C语言的资料从专业入门到高级教程」, 点个关注在评论区回复“888”之后私信回复“888”,全部无偿共享给大家&…

STM32F4学习

F4系统架构 8个主控总线7个被控总线 主控总线 Cortex-M4内核 I总线Cortex-M4内核 D总线Cortex-M4内核 S总线DMA1存储器总线DMA2存储器总线DMA2外设总线以太网DMA总线USB OTG HS DMA总线 被控总线 内部FLASH ICode总线内部FLASH DCode总线主要内部SRAM1(112KB&a…

【PostgreSQL内核学习(二十六) —— (共享数据缓冲区)】

共享数据缓冲区 概述共享数据缓冲区管理共享缓冲区管理的核心功能包括:共享数据缓冲区的组织结构初始化共享缓冲池BufferDesc 结构体InitBufferPool 函数如何确定请求的数据页面是否在缓冲区中?BufferTag 结构体RelFileNode 结构体ForkNumber 结构体ReadBuffer_common 函数怎…

【AI绘画+Midjourney平替】Fooocus:图像生成、修改软件(Controlnet原作者重新设计的UI+Windows一键部署)

代码:https://github.com/lllyasviel/Fooocus windows一键启动包下载:https://github.com/lllyasviel/Fooocus/releases/download/release/Fooocus_win64_2-1-831.7z B站视频教程:AI绘画入门神器:Fooocus | 简化SD流程&#xff0c…

【51单片机】开发板&开发软件(Keil5&STC-ISP)简介&下载安装破译传送门(1)

前言 大家好吖,欢迎来到 YY 滴单片机系列 ,热烈欢迎! 本章主要内容面向接触过单片机的老铁 主要内容含: 欢迎订阅 YY滴C专栏!更多干货持续更新!以下是传送门! YY的《C》专栏YY的《C11》专栏YY的…

Windows如何安装Node.js环境并制作贪吃蛇小游戏分享好友远程访问

文章目录 前言1.安装Node.js环境2.创建node.js服务3. 访问node.js 服务4.内网穿透4.1 安装配置cpolar内网穿透4.2 创建隧道映射本地端口 5.固定公网地址 前言 Node.js 是能够在服务器端运行 JavaScript 的开放源代码、跨平台运行环境。Node.js 由 OpenJS Foundation&#xff0…

JAVA中的类变量

一、如何定义类变量 定义语法: 访问修饰符 static 数据类型 变量名; static 访问修饰符 数据类型 变量名; 注:访问修饰符应遵守相关访问权限 如何访问类变量 类名.类变量名 或者 对象名.类变量名 public class StaticVar {public stat…

redis(6)

文章目录 一、redis clusterRedis Cluster 工作原理Redis cluster 基本架构Redis cluster主从架构Redis Cluster 部署架构说明部署方式介绍 原生命令手动部署原生命令实战案例:利用原生命令手动部署redis cluster 实战案例:基于Redis 5 的redis cluster部…

【Java报错】显示错误“Error:java: 程序包org.springframework.boot不存在“

使用idea运行项目,显示错误信息如下: 原因是:idea配置的maven加载不到autoconfigure。 解决方案一: 第6步绕过证书语句如下: -Dmaven.wagon.http.ssl.insecuretrue -Dmaven.wagon.http.ssl.allowalltrue 打开终端&am…

【视频编码\VVC】变换编码基础知识及标准设计相关参数

变化编码的基础知识 定义:变换编码是将以空间域像素形式描述的图像转换至变换域,以变换系数的形式加以表示。 大部分图像都包含较多平坦区域和内容变化缓慢的区域,使得图像能量在空间域的分散转换为变换域的相对集中分布,从而达…

Spring事务源码解析

Spring的事务属于逻辑事务。不是物理事务。 Spring并不直接管理事务,而是提供了多种事务管理器,它们将事务管理的职责委托给JDBC或者JTA等持久化机制所提供的相关平台框架的事务来实现。例如JDBC的事物管理器就是DataSourceTransactionManager。   Spr…

寒假作业2月5号

第四章 堆与拷贝构造函数 一 、程序阅读题 1、给出下面程序输出结果。 #include <iostream.h> class example {int a; public: example(int b5){ab;} void print(){aa1;cout <<a<<"";} void print()const {cout<<a<<endl;} …

算法学习——华为机考题库10(HJ64 - HJ69)

算法学习——华为机考题库10&#xff08;HJ64 - HJ69&#xff09; HJ64 MP3光标位置 描述 MP3 Player因为屏幕较小&#xff0c;显示歌曲列表的时候每屏只能显示几首歌曲&#xff0c;用户要通过上下键才能浏览所有的歌曲。为了简化处理&#xff0c;假设每屏只能显示4首歌曲&a…