定制elementPlus主题

1. 安装sass

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

npm i sass -D

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

styles/element/index.scss

/* 只需要重写你需要的即可 */
@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的组件中,按照官方的配置文档来 vite.config.js

  1. 自动导入定制化样式文件进行样式覆盖
  2. 按需定制主题配置
    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'// https://vitejs.dev/config/
    export default defineConfig({plugins: [vue(),AutoImport({resolvers: [ElementPlusResolver()],}),Components({// 1.配置elementPlus采用sacc样式配色系统resolvers: [ElementPlusResolver({importStyle: 'sass'})],}),],resolve: {alias: {'@': fileURLToPath(new URL('./src', import.meta.url))}},css: {preprocessorOptions: {scss: {// 2.自动导入定制化样式文件进行样式覆盖additionalData: `@use "@/styles/element/index.scss" as *;`,}}}
    })
    

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

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

相关文章

测试:虚拟机查看CPU使用率

Windows虚拟机 任务管理器: 在虚拟机中,您可以打开任务管理器(Ctrl Shift Esc),然后在“进程”标签下查看CPU使用率。 PowerShell: 使用PowerShell命令Get-VM | Select-Object Name, CPUUsage可以查询虚拟机的CPU使用率。 VMwa…

[足式机器人]Part3 机构运动学与动力学分析与建模 Ch00-4(1) 刚体的速度与角速度

本文仅供学习使用,总结很多本现有讲述运动学或动力学书籍后的总结,从矢量的角度进行分析,方法比较传统,但更易理解,并且现有的看似抽象方法,两者本质上并无不同。 2024年底本人学位论文发表后方可摘抄 若有…

关于java类与对象的创建

关于java类与对象的创建 我们在前面的文章中回顾了方法的定义和方法的调用,以及了解了面向对象的初步认识,我们本篇文章来了解一下类和对象的关系,还是遵循结合现实的方式去理解,不是死记硬背😀。 1、类 类是一种抽…

【InternLM 大模型实战】第五课

LMDeploy 大模型量化部署实践 大模型部署背景模型部署定义:产品形态计算设备 大模型特点内存开销巨大动态shape相对视觉模型,LLM结构简单 大模型部署挑战设备推理服务 大模型部署方案技术点方案云端移动端 LMDeploy 简介高效推理引擎完备易用的工具链支持…

环境配置注解 @PostConstruct作用以及在springboot框架中的加载时间

作用 PostConstruct 是 Java EE 5 引入的一个注解,用于 Spring 框架中。它标记在方法上,以表示该方法应该在对象的依赖注入完成后,并且在类的任何业务方法被调用之前执行。这个注解的主要用途是进行一些初始化工作。需要注意的是:…

统计学-R语言-4.5

文章目录 前言多变量数据多维列联表复式条形图并列箱线图R语言中取整运算主要包括以下五种: 点带图多变量散点图重叠散点图矩阵式散点图 练习 前言 本篇文章将继续对数据的类型做介绍,本片也是最后一个介绍数据的。 多变量数据 掌握描述多变量数据的分…

CDN内容分发网络

1、CDN的含义 1.1 什么是CDN? CDN是内容分发网络(Content Delivery Network)的缩写。它是一种通过将内容部署到全球各地的服务器节点,使用户能够快速访问和下载内容的网络架构。 简单来说,CDN通过将内容分发到离用户更…

Redis-redis.conf配置文件中的RDB与AOF持久化方式的详解与区别

RDB(Redis Database) RDB是Redis的默认持久化方式,它将内存中的数据以二进制格式写入磁盘,形成一个快照。RDB持久化有以下几个重要的配置选项: save:指定了保存RDB的策略,默认的配置是每900秒&…

【软件测试】学习笔记-后端性能测试工具原理与行业常用工具简介

不管是什么类型的性能测试方法,都需要去模拟大量并发用户的同时执行,所以性能测试基本都是靠工具实现。没有工具,性能测试将寸步难行。 这篇文章从后端性能测试的工具讲起,讨论它们的实现原理,以及如何用于后端的性能…

SpringCloud:Gateway服务网关

文章目录 Gateway服务网关快速入门断言工厂默认过滤器自定义过滤器过滤器执行顺序跨域问题处理 Gateway服务网关 网关(Gateway)是将两个使用不同协议的网络段连接在一起的设备。 网关的作用就是对两个网络段中的使用不同传输协议的数据进行互相的翻译转换…

案例123:基于微信小程序的在线订餐系统的设计与实现

文末获取源码 开发语言:Java 框架:springboot JDK版本:JDK1.8 数据库:mysql 5.7 开发软件:eclipse/myeclipse/idea Maven包:Maven3.5.4 小程序框架:uniapp 小程序开发软件:HBuilder …

CSS 雷达监测效果

<template><view class="center"><view class="loader"><view></view></view></view></template><script></script><style>/* 设置整个页面的背景颜色为深灰色 */body {background-col…

leetcode - 934. Shortest Bridge

Description You are given an n x n binary matrix grid where 1 represents land and 0 represents water. An island is a 4-directionally connected group of 1’s not connected to any other 1’s. There are exactly two islands in grid. You may change 0’s to 1…

【记录】重装系统后的软件安装

考完研重装了系统&#xff0c;安装软件乱七八糟&#xff0c;用到什么装什么。在这里记录一套标准操作&#xff0c;备用。一个个装还是很麻烦&#xff0c;我为什么不直接写个脚本直接下载安装包呢&#xff1f;奥&#xff0c;原来是我太菜了还不会写脚本啊&#xff01;先记着吧&a…

业务题day02

2-1 说一下生成课表的业务流程 当点击马上学习或者报名的时候&#xff0c;先去数据库查询课程是否存在或者是否在有效期内&#xff0c;如果判断通过&#xff0c;就成功。 接下来就要保存对应的课表&#xff0c;在上述操作中涉及两个微服务&#xff0c;下单过程trade微服务调用…

Zookeeper使用详解

介绍 ZooKeeper是一个分布式的&#xff0c;开放源码的分布式应用程序协调服务&#xff0c;是Google的Chubby一个开源的实现&#xff0c;是Hadoop和Hbase的重要组件。它是一个为分布式应用提供一致性服务的软件&#xff0c;提供的功能包括&#xff1a;配置维护、域名服务、分布…

C语言之冒泡排序(数组)

//数组--冒泡排序 //1.经典错误版 #include<stdio.h> void bubble_sort(int arr[]) { //确定冒泡函数的趟数(10个元素&#xff0c;9趟冒泡排序) int i 0; int sz sizeof(arr) / sizeof(arr[0]);//10 算出了1 这里错了 传参错了 for (i 0; i < sz…

1127: 矩阵乘积

题目描述 计算两个矩阵A和B的乘积。 输入 第一行三个正整数m、p和n&#xff0c;0<m,n,p<10&#xff0c;表示矩阵A是m行p列&#xff0c;矩阵B是p行n列&#xff1b; 接下来的m行是矩阵A的内容&#xff0c;每行p个整数&#xff0c;用空格隔开&#xff1b; 最后的p行是矩…

【零基础入门TypeScript】字符串

目录 句法 字符串方法 String 对象允许您处理一系列字符。它使用许多辅助方法包装字符串原始数据类型。 句法 var var_name new String(string); 下面给出了 String 对象中可用方法的列表及其描述&#xff1a; 编号属性及描述1.构造函数 返回对创建该对象的 String 函数的…

MFC多线程编程示例1

新建一个对话框工程; 添加2个编辑框,2个按钮; 对话框头文件添加, public:CWinThread *m_pthread1;CWinThread *m_pthread2;static UINT hellothread(LPVOID lparam);static UINT testthread(LPVOID lparam);CCriticalSection g_criticalsection;BOOL flag;int i1, i2; …