【vue3】elementPlus主题色定制
以scss语言为例
1、element-plus自动按需导入配置,可参考官网按需导入模块

安装element-plus及辅助插件
npm i element-plus --save
安装辅助插件
npm install -D unplugin-vue-components unplugin-auto-import
安装sass
npm i sass -D
2、vite.config.js 中配置
// vite.config.ts
import { defineConfig } from 'vite'
//element-plus按需导入
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'export default defineConfig({// ...plugins: [vue(),// element-plus按需配置AutoImport({resolvers: [ElementPlusResolver()],}),Components({resolvers: //1、配置elementPlus采用sass样式配色系统[ElementPlusResolver({importStyle:"sass"})],}),],resolve:{
alias:{
'@':fileURLToPath(new URL('./src',import.meta.url))
}
},
css:{
preprocessorOptions:{
scss:{
//2、自动导入定制化样式文件进行样式覆盖
additionalData:`@use "@/styles/element-plus/index.scss" as *`
}
}}
})
styles文件夹下新增element文件夹,新增index
.scss
@forward 'element-plus/theme-chalk/src/common/var.scss' with(
$colors:(
'primary':(//主色'base':#27ba9b
),
'success':(//成功色'base':#1dc729
),
'warning':(//警告色'base':#ffb302
),
'danger':(//危险色'base':#e26237
),
)
);
3、自动导入配置
1、vite.config.ts中plugins配置项中增加{importStyle:“scss”}

2、vite.config.ts中scss配置项中添加additionalData:@use "@/styles/element-plus/index.scss" as *

相关文章:
【vue3】elementPlus主题色定制
以scss语言为例 1、element-plus自动按需导入配置,可参考官网按需导入模块 安装element-plus及辅助插件 npm i element-plus --save安装辅助插件 npm install -D unplugin-vue-components unplugin-auto-import安装sass npm i sass -D2、vite.config.js 中配置…...
MATLAB 2023a的机器学习、深度学习
MATLAB 2023版的深度学习工具箱,提供了完整的工具链,使您能够在一个集成的环境中进行深度学习的建模、训练和部署。与Python相比,MATLAB的语法简洁、易于上手,无需繁琐的配置和安装,让您能够更快地实现深度学习的任务。…...
【Python实际使用】Python提取pdf中的表格数据输出到excel(含代码实例)
前两天有朋友问我,你能不能帮我把pdf中的表格数据抓出来,输出到excel中,我说我试试。 最近看资料发现python有很多库都可以完成pdf中的表格数据抓取,选择其中一种尝试:pdfplumber。 一、简单介绍 在使用之前我们简单…...
css的transform样式计算-第一节
本文作者为 360 奇舞团前端开发工程师 引言 在使用 css 样式进行样式的缩放、旋转等设置时,思考了一下它的较浅层的原理,恩,这个阶段都 是一些初高的数学计算,从新看这里的时候顺便捡了捡初高中的数学,比如三角函数之类…...
C++中vector、list和deque的选择:什么时候使用它们?
系列文章目录 文章目录 系列文章目录前言一、vector二、list三、deque总结 前言 在C中,vector、list和deque是STL(标准模板库)提供的三种常见的容器。每种容器都有其特点和适用场景。本文将详细介绍vector、list和deque的特点以及它们的适用…...
【力扣每日一题】2023.8.10 下降路径最小和Ⅱ
目录 题目: 示例: 分析: 代码: 题目: 示例: 分析: 题目给我们一个数组,让我们模拟从上面第一层走到下面的最后一层,下降路径需要加上经过的格子的值,每层…...
gh-ost概述(二实践)
注意:只适用于拥有主键或者唯一键的表,不存在触发器的表 一、gh-ost的安装部署 0、yum -y install golang 1、进入官网GitHub - github/gh-ost: GitHub’s Online Schema-migration Tool for MySQL 2、下载gh-ost-master.zip包 3、解压unzip gh-ost-mast…...
临时文档3
Set接口 说一下 HashSet 的实现原理? HashSet 是基于 HashMap 实现的,HashSet的值存放于HashMap的key上,HashMap的value统一为PRESENT,因此 HashSet 的实现比较简单,相关 HashSet 的操作,基本上都是直接调…...
【OpenGauss源码学习 —— 执行算子(SeqScan算子)】
执行算子(SeqScan算子) 执行算子概述扫描算子SeqScan算子ExecInitSeqScan函数InitScanRelation函数ExecSeqScan函数 总结 声明:本文的部分内容参考了他人的文章。在编写过程中,我们尊重他人的知识产权和学术成果,力求遵…...
Postman中,既想传递文件,还想传递多个参数(后端)
需求:既想传文件又想传多个参数可以用以下方式实现...
跨境干货|TikTok变现的9种方法
在这个流量为王的时代,哪里有流量,哪里就有商机。TikTok作为近几年最火爆的社媒平台之一,在全球范围都具有一定的影响力。随着TikTok Shop等商务功能加持上线,更是称为跨境电商的新主场之一。 在这样的UGC平台,想要变…...
Grafana 曲线图报错“parse_exception: Encountered...”
问题现象 配置的Grafana图报错如下: 原因分析 点开报错,可以看到报错详细信息,是查询语句的语法出现了异常。 变量pool的取值为None 解决方案 需要修改变量pool的查询SQL,修改效果如下: 修改后&#x…...
idea中提示Unsupported characters for the charset ‘ISO-8859-1‘
application.properties中文注释拉黄线 ,提示Unsupported characters for the charset ISO-8859-1 解决办法: 注意: 改完之后之前输入的中文就变成“ ???”了,建议备份一下 1、打开setti…...
通过signtool进行数字签名和验证签名
(一)如何签名 SignTool.exe (Sign Tool) - .NET Framework | Microsoft Learn Using SignTool to Sign a File - Win32 apps | Microsoft Learn 签名命令行: signtool.exe sign /f xxx.pfx /t http://timestamp.digicert.com yyy.dll xx…...
geeemap学习总结(2)——地图底图应用
1. 加载库中已有图层 import os os.environ[HTTP_PROXY] http://127.0.0.1:8001 os.environ[HTTPS_PROXY] http://127.0.0.1:8001 # 设置中心位置/地图层级/图层加载高度,加载图层 import geemap Mapgeemap.Map(center[40, 100], zoom4, height600) Map# 添加已经…...
flutter 手写日历组件
先看效果 直接上代码 calendar_popup_view.dart import package:flutter/material.dart; import package:intl/intl.dart;import custom_calendar.dart; import hotel_app_theme.dart;class CalendarPopupView extends StatefulWidget {const CalendarPopupView({required th…...
C++动态规划经典试题解析之打家劫舍系列
1.前言 力扣上有几道与打家劫舍相关的题目,算是学习动态规划时常被提及的经典试题,很有代表性,常在因内大大小小的社区内看到众人对此类问题的讨论。 学习最好的方式便是归纳总结、借鉴消化,基于这个目的,本文对此类问题也做了讲解,在一些优秀思想的基础上添加了个人观…...
24届近5年东南大学自动化考研院校分析
今天给大家带来的是东南大学控制考研分析 满满干货~还不快快点赞收藏 一、东南大学 学校简介 东南大学是我国最早建立的高等学府之一,素有“学府圣地”和“东南学府第一流”之美誉。东南大学前身是创建于1902年的三江师范学堂。1921年经近代著名教育家…...
electron、electron-forge 安装
npm修改了registry,安装依旧无效 使用cnpm 倒是可以解决,但是 npx electron-forge import 中 Installing dependencies 使用的是npm 给出一次性解决方案: step1:切换npm的下载源,可以使用nrm 进行管理,有…...
go的strings用法
strings 是 Go 语言标准库中提供的一个包,用于处理字符串相关的操作。这个包包含了许多函数,可以用于字符串的切割、拼接、替换、查找等操作。下面是一些常用的 strings 包函数和用法示例: package mainimport ("fmt""string…...
C++实现分布式网络通信框架RPC(3)--rpc调用端
目录 一、前言 二、UserServiceRpc_Stub 三、 CallMethod方法的重写 头文件 实现 四、rpc调用端的调用 实现 五、 google::protobuf::RpcController *controller 头文件 实现 六、总结 一、前言 在前边的文章中,我们已经大致实现了rpc服务端的各项功能代…...
云计算——弹性云计算器(ECS)
弹性云服务器:ECS 概述 云计算重构了ICT系统,云计算平台厂商推出使得厂家能够主要关注应用管理而非平台管理的云平台,包含如下主要概念。 ECS(Elastic Cloud Server):即弹性云服务器,是云计算…...
【Oracle APEX开发小技巧12】
有如下需求: 有一个问题反馈页面,要实现在apex页面展示能直观看到反馈时间超过7天未处理的数据,方便管理员及时处理反馈。 我的方法:直接将逻辑写在SQL中,这样可以直接在页面展示 完整代码: SELECTSF.FE…...
QMC5883L的驱动
简介 本篇文章的代码已经上传到了github上面,开源代码 作为一个电子罗盘模块,我们可以通过I2C从中获取偏航角yaw,相对于六轴陀螺仪的yaw,qmc5883l几乎不会零飘并且成本较低。 参考资料 QMC5883L磁场传感器驱动 QMC5883L磁力计…...
生成 Git SSH 证书
🔑 1. 生成 SSH 密钥对 在终端(Windows 使用 Git Bash,Mac/Linux 使用 Terminal)执行命令: ssh-keygen -t rsa -b 4096 -C "your_emailexample.com" 参数说明: -t rsa&#x…...
如何将联系人从 iPhone 转移到 Android
从 iPhone 换到 Android 手机时,你可能需要保留重要的数据,例如通讯录。好在,将通讯录从 iPhone 转移到 Android 手机非常简单,你可以从本文中学习 6 种可靠的方法,确保随时保持连接,不错过任何信息。 第 1…...
04-初识css
一、css样式引入 1.1.内部样式 <div style"width: 100px;"></div>1.2.外部样式 1.2.1.外部样式1 <style>.aa {width: 100px;} </style> <div class"aa"></div>1.2.2.外部样式2 <!-- rel内表面引入的是style样…...
2025季度云服务器排行榜
在全球云服务器市场,各厂商的排名和地位并非一成不变,而是由其独特的优势、战略布局和市场适应性共同决定的。以下是根据2025年市场趋势,对主要云服务器厂商在排行榜中占据重要位置的原因和优势进行深度分析: 一、全球“三巨头”…...
python爬虫——气象数据爬取
一、导入库与全局配置 python 运行 import json import datetime import time import requests from sqlalchemy import create_engine import csv import pandas as pd作用: 引入数据解析、网络请求、时间处理、数据库操作等所需库。requests:发送 …...
高考志愿填报管理系统---开发介绍
高考志愿填报管理系统是一款专为教育机构、学校和教师设计的学生信息管理和志愿填报辅助平台。系统基于Django框架开发,采用现代化的Web技术,为教育工作者提供高效、安全、便捷的学生管理解决方案。 ## 📋 系统概述 ### 🎯 系统定…...
