vue 修改element-plus主题色

news2024/11/19 10:31:39

一、安装SCSS

npm install sass --save-dev
npm install sass-loader --save-dev  
npm install node-sass --save-dev
npm install vue-style-loader --sava-dev

二、添加主题文件theme.scss

@forward "element-plus/theme-chalk/src/common/var.scss" with (
  $colors: (
    "primary": (
      "base": #09c,
      "color": #fff,
    ),
  )
);
 
@use "element-plus/theme-chalk/src/index.scss" as *;

三、main.js引入

import './assets/css/theme.scss'

运行效果

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

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

相关文章

vulnhub prime1通关

目录 环境安装 1.信息收集 收集IP 端口扫描 目录扫描 目录文件扫描 查找参数 打Boss 远程文件读取 木马文件写入 权限提升 方法一 解锁密钥 方法二: linux内核漏洞提权 总结 环境安装 Kali2021.4及其prime靶机 靶机安装:Prime: 1 ~ Vul…

腾讯云GPU服务器介绍_GPU实例规格价格_AI_深度学习

腾讯云GPU服务器是提供GPU算力的弹性计算服务,腾讯云GPU服务器具有超强的并行计算能力,可用于深度学习训练、科学计算、图形图像处理、视频编解码等场景,腾讯云百科txybk.com整理腾讯云GPU服务器租用价格表、GPU实例优势、GPU解决方案、GPU软…

docker 和K8S知识分享

docker知识: 比如写了个项目,并且在本地调试没有任务问题,这时候你想在另外一台电脑或者服务器运行,那么你需要在另外一台电脑或者服务器配置相同的软件,比如数据库,web服务器,必要的插件和库等…

Excel数字乱码怎么回事 Excel数字乱码怎么调回来

在日常工作中,Excel是我们最常使用的数据处理软件之一,它强大的功能使得数据处理变得既简单又高效。然而,用户在使用Excel时偶尔会遇到数字显示为乱码的问题,这不仅影响了数据的阅读,也大大降低了工作效率。那么&#…

光速论文能用吗 #媒体#知识分享#学习方法

光速论文是一个非常有效的论文写作、查重降重工具,它的使用非常简单方便,而且功能强大,是每个写作者必备的利器。 首先,光速论文具有强大的查重降重功能,能够快速检测论文中的抄袭部分,帮助作者避免不必要的…

clang-query 的编译安装与使用示例

1,clang query 概述 作用: 检查一个程序源码的抽象语法树,测试 AST 匹配器; 帮助检查哪些 AST 节点与指定的 AST 匹配器相匹配; 2,clang-query 安装 准备: git clone --recursive https://git…

ChatGPT智能聊天系统源码v2.7.6全开源Vue前后端+后端PHP

测试环境:Linux系统CentOS7.6、宝塔、PHP7.4、MySQL5.6,根目录public,伪静态thinkPHP,开启ssl证书 具有文章改写、广告营销文案、编程助手、办公达人、知心好友、家庭助手、出行助手、社交平台内容、视频脚本创作、AI绘画、思维导图等功能 ai通道:文心一言、MiniMax、智…

38 mars3d 对接地图图层 绘制点线面员

前言 这里主要是展示一下 mars3d 的一个基础的使用 主要是设计 接入地图服务器的 卫星地图, 普通的二维地图, 增加地区标记 基础绘制 点线面园 等等 测试用例 <template><div style"width: 1920px; height:1080px;"><div class"mars3dClas…

Linux :环境基础开发工具

目录: 1. Linux 软件包管理器 yum 1. 什么是软件包 2. 查看软件包 3. 如何安装软件 4. 如何卸载软件 2. Linux开发工具 1. Linux编辑器-vim的基本概念 2. vim使用 3. vim的基本操作 4. vim正常模式命令集 5. vim末行模式命令集 6. 简单vim配置 3. Linux编译器-gcc/…

python(django)之流程接口管理后台开发

1、在models.py中加入流程接口表和单一接口表 代码如下&#xff1a; from django.db import models from product.models import Product# Create your models here.class Apitest(models.Model):apitestname models.CharField(流程接口名称, max_length64)apitester model…

人事管理系统设计与实现|jsp+ Mysql+Java+ B/S结构(可运行源码+数据库+设计文档)

本项目包含可运行源码数据库LW调试部署环境&#xff0c;文末可获取本项目的所有资料。 推荐阅读100套最新项目 最新ssmjava项目文档视频演示可运行源码分享 最新jspjava项目文档视频演示可运行源码分享 最新Spring Boot项目文档视频演示可运行源码分享 2024年56套包含java…

力扣面试150 加一 模拟 加法进位

Problem: 66. 加一 文章目录 思路复杂度Code 思路 模拟加法运算&#xff0c;逢十进一 复杂度 时间复杂度: O ( n ) O(n) O(n) 空间复杂度: O ( 1 ) O(1) O(1) Code class Solution {public int[] plusOne(int[] d) {int n d.length;for(int i n-1; i > 0; i--){i…

2、怎么优化google网站才能获得好的排名

怎么才能让google搜索引擎对你的网站青睐且获得更好的排名&#xff1f;这个不的不说google的算法和机制。 什么是google搜索引擎算法&#xff1f; 是一套用于索引前对数据的入库的赛选及将用户所需要东西搜索显示的一个过程。从各种算法的赛选到用户曝光来确定网站关键词的排名…

【开发环境搭建篇】Nacos的安装和配置

作者介绍&#xff1a;本人笔名姑苏老陈&#xff0c;从事JAVA开发工作十多年了&#xff0c;带过大学刚毕业的实习生&#xff0c;也带过技术团队。最近有个朋友的表弟&#xff0c;马上要大学毕业了&#xff0c;想从事JAVA开发工作&#xff0c;但不知道从何处入手。于是&#xff0…

使用插件将swagger文档转html或pdf

github上有maven开源插件swagger2markup将swagger文档转为.adoc格式的文档&#xff0c;另外一个maven开源插件asciidoctorj-pdf则可以将.adoc格式的文档转为html和pdf。由于GitHub访问不稳定&#xff0c;在gitee上有镜像项目。所以我就贴gitee上的项目地址了。 实现从swagger文…

135. 分发糖果(力扣LeetCode)

文章目录 135. 分发糖果题目描述贪心算法代码如下 总结 135. 分发糖果 题目描述 n 个孩子站成一排。给你一个整数数组 ratings 表示每个孩子的评分。 你需要按照以下要求&#xff0c;给这些孩子分发糖果&#xff1a; 每个孩子至少分配到 1 个糖果。相邻两个孩子评分更高的孩…

【Netty 源码】NioEventLoop 源码分析 篇二

【Netty 源码】NioEventLoop 源码分析 篇二 1.NioEventLoop 继承关系 NioEventLoop继承自SingleThreadEventLoop&#xff0c;一次只能执行一个线程任务&#xff0c;因此在父类SingleThreadEventLoop中维护了 Queue tailTasks 线程队列。 NioEventLoop又间接继承了 AbstractS…

uni-app里面如何使用图标

目录 一、导入 1.在官方&#xff08;iconfont-阿里巴巴矢量图标库&#xff09;选择自己想要的图标&#xff0c;加入购物车 2. 在点击购物车下载代码 3.解压文件夹 并更改名字 4.将文件夹&#xff08;iconfont&#xff09;整个放到项目中的static中 5.修改iconfont.css文件…

手机实时监控电脑屏幕(手机可以看到电脑在干什么吗)

已经2024年了&#xff0c;假如你还在问我&#xff0c;手机可以看到电脑在干什么吗&#xff0c;有没有手机实时监控电脑屏幕的系统。 那么证明&#xff0c;你可能已经out 了。 现代科技告诉发展的态势下&#xff0c;这种技术已经很成熟了。 域智盾软件就可以实现这种效果↓我们…

稀碎从零算法笔记Day22-LeetCode:两数相加

题型&#xff1a;链表 链接&#xff1a;2. 两数相加 - 力扣&#xff08;LeetCode&#xff09; 来源&#xff1a;Leet 题目描述 给你两个 非空 的链表&#xff0c;表示两个非负的整数。它们每位数字都是按照 逆序 的方式存储的&#xff0c;并且每个节点只能存储 一位 数字。 …