vue3 element plus 更换主题颜色

实测有效

1.src下新建文件styles/element/index.scss

// styles/element/index.scss
/* 只需要重写你需要的即可 */
 
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
  $colors: (
    'primary': (
      'base': #b78e81,
    ),
    'success': (
      'base': #b78e81,
    ),
  ),
);

2.vite.config.ts 里面新增依赖

// 新增 npm i unplugin-vue-components
// 新增  npm i unplugin-auto-import

import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";

3.配置vite.config.ts 重新启动即可

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { resolve } from "path";

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/
const pathResolve = (dir: string) => {
  return resolve(__dirname, ".", dir);
};
const alias: Record<string, string> = {
  "/@": pathResolve("./src/"),
};


// vite.config
export default defineConfig({
  plugins: [
    vue(),
    // 1.第一步
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    // 2.第二步
    Components({
      //1.配置elementPlus采用css样式文件
      resolvers: [ElementPlusResolver({ importStyle: "sass" })],
    }),
  ],
  resolve: { alias },
  css: {
    preprocessorOptions: {
    // 3.第三步
      scss: {
        // additionalData: `@import "./src/style/mixin.scss";`, // 此处全局的scss文件
        additionalData: `
          @use "/@/styles/element/index.scss" as *;
        `,
      },
    },
  },
  server: {
    proxy: {
      "/api": {
        target: "http://localhost:3000",
        changeOrigin: true,
      },
    },
  },
});

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

借助拧紧曲线高效管理螺栓装配防错——SunTorque智能扭矩系统

拧紧曲线作为拧紧质量的“晴雨表”&#xff0c;在拧紧过程中&#xff0c;能够实时探知到拧紧状态是否存在异常&#xff0c;并根据曲线特质推测出拧紧过程中遇到了什么样的问题&#xff0c;今天SunTorque智能扭矩系统带您了解拧紧曲线在螺栓装配防错管理中如何发挥作用。 合格的…

网络和Linux网络_2(套接字编程)socket+UDP网络通信代码

目录 1. 预备知识 1.1 源IP地址和目的IP地址 1.2 端口号port和套接字socket 1.3 网络通信的本质 1.4 TCP和UDP协议 1.5 网络字节序 2. socket套接字 2.1 socket创建套接字 2.2 bind绑定 2.3 sockaddr结构体 3. UDP网络编程 3.1 server的初始化服务器 3.2 server的…

Java小游戏之——贪吃蛇

今天详细讲解写贪吃蛇的遇到的问题 代码&#xff1a; Main类 GrameStart类 GamePanel类 启动main方法 在写贪吃蛇的时候&#xff0c;我接触到了两个新东西&#xff1a; 1.定时器Timer类。 2.paint&#xff08;&#xff09;绘图方法。第一次出现在java.awt.Component类中&…

云性能监控的五大重要性

在当今数字化时代&#xff0c;企业越来越依赖云服务来支持其IT基础设施和业务运营。为了确保这些云服务的稳定性和性能&#xff0c;云性能监控变得至关重要。本文将探讨云性能监控的重要性。 一、实时可见性 云性能监控提供了对云基础设施和应用程序性能的实时可见性。这意味着…

探索arkui(2)--- 布局(列表)--- 1(列表数据的展示)

前端开发布局是指前端开发人员宣布他们开发的新网站或应用程序正式上线的活动。在前端开发布局中&#xff0c;开发人员通常会展示新网站或应用程序的设计、功能和用户体验&#xff0c;并向公众宣传新产品的特点和优势。前端开发布局通常是前端开发领域的重要事件&#xff0c;吸…

【LeetCode刷题-滑动窗口】--487.最大连续1的个数II

487.最大连续1的个数II 方法&#xff1a;滑动窗口 维护一个区间&#xff0c;使得该区间中只包含一个0 class Solution {public int findMaxConsecutiveOnes(int[] nums) {int n nums.length;int left 0,right 0,sum 0;int zero 0; //计算0的个数while(right < n){if(…

基于JavaWeb+SpringBoot+Vue房屋租赁系统微信小程序系统的设计和实现

基于JavaWebSpringBootVue房屋租赁系统微信小程序系统的设计和实现 源码获取入口前言主要技术系统设计功能截图Lun文目录订阅经典源码专栏Java项目精品实战案例《500套》 源码获取 源码获取入口 前言 21世纪是信息的时代&#xff0c;是网络的时代&#xff0c;进入信息社会高速…

(C++)把字符串转换成整数

把字符串转换成整数_牛客题霸_牛客网 愿所有美好如期而遇 思路 看到这个题目我们首先应该想到的就是去处理第一个字符&#xff0c;但是第一个字符也可能是数字字符&#xff0c;所以我们需要对他单独处理&#xff0c;如果他不符合条件&#xff0c;直接return&#xff0c;符合条…

java实现钉钉机器人消息推送

项目开发中需要用到钉钉机器人发送任务状态&#xff0c;本来想单独做一个功能就好&#xff0c;但是想着公司用到钉钉机器人发送项目挺多的。所以把这个钉钉机器人抽离成一个组件发布到企业maven仓库&#xff0c;这样可以给其他同事用提高工作效率。 1.目录结构 2.用抽象类&…

C语言加密字符(ZZULIOJ1064:加密字符)

题目描述 从键盘输入一批字符&#xff0c;以结束&#xff0c;按要求加密并输出。 输入&#xff1a;从键盘输入一批字符&#xff0c;占一行&#xff0c;以结束。 输出&#xff1a;输出占一行 加密规则: 1&#xff09;所有字母均转换为小写。 2&#xff09;若是字母a到y&#xff…

系列七、JVM的内存结构【堆(Heap)】

一、概述 一个JVM实例只存在一个堆内存&#xff0c;堆内存的大小是可以手动调节的。类加载器读取了类文件后&#xff0c;需要把类、方法、常变量放到堆内存中&#xff0c;保存所有引用类型的真实信息&#xff0c;以方便执行器执行&#xff0c;堆内存分为三个部分&#xff0c;即…

EtherCAT从站EEPROM组成信息详解(3):字16-63邮箱、EEPROM信息

0 工具准备 1.EtherCAT从站EEPROM数据&#xff08;本文使用DE3E-556步进电机驱动器&#xff09;1 字10-63邮箱、EEPROM信息 1.1 字10-63组成规范 字10-63虽然包含的空间区域很大&#xff0c;但实际上仅包含引导状态下邮箱配置、标准邮箱配置、EEPROM大小、执行的SII标准版本…

相机突然断电,保存的DAT视频文件如何修复

3-7 本文主要解决因相机突然断电导致拍摄的视频文件损坏的问题。 在平常使用相机拍摄视频&#xff0c;比如用单反相机、无人机拍摄视频的时候&#xff0c;如果电池突然断电&#xff0c;或者突然炸机了&#xff0c;就非常有可能会得到一个损坏的视频文件&#xff0c;比如会产生…

网络安全(黑客技术)—高效自学

前言 前几天发布了一篇 网络安全&#xff08;黑客&#xff09;自学 没想到收到了许多人的私信想要学习网安黑客技术&#xff01;却不知道从哪里开始学起&#xff01;怎么学 今天给大家分享一下&#xff0c;很多人上来就说想学习黑客&#xff0c;但是连方向都没搞清楚就开始学习…

udp多点通信-广播-组播

单播 每次只有两个实体相互通信&#xff0c;发送端和接收端都是唯一确定的。 广播 主机之间的一对多的通信所有的主机都可以接收到广播消息(不管你是否需要)广播禁止穿过路由器&#xff08;只能做局域网通信&#xff09;只有UDP可以广播广播地址 有效网络号全是1的主机号 192.1…

卷积神经网络(CNN)多种图片分类的实现

文章目录 前期工作1. 设置GPU&#xff08;如果使用的是CPU可以忽略这步&#xff09;我的环境&#xff1a; 2. 导入数据3.归一化4.可视化 二、构建CNN网络模型三、编译模型四、训练模型五、预测六、模型评估 前期工作 1. 设置GPU&#xff08;如果使用的是CPU可以忽略这步&#…

ElasticStack日志分析平台-ES 集群、Kibana与Kafka

一、Elasticsearch 1、介绍&#xff1a; Elasticsearch 是一个开源的分布式搜索和分析引擎&#xff0c;Logstash 和 Beats 收集的数据可以存储在 Elasticsearch 中进行搜索和分析。 Elasticsearch为所有类型的数据提供近乎实时的搜索和分析&#xff1a;一旦数据被索引&#…

Python Numpy.einsum

、 见 https://zhuanlan.zhihu.com/p/27739282

Resolume Arena 7.15.0(VJ音视频软件)

Resolume Arena 7是一款专业的实时视觉效果软件&#xff0c;用于创造引人入胜的视频演出和灯光秀。它提供了丰富多样的功能和工具&#xff0c;可以将音频、视频和图像合成在一起&#xff0c;创造出令人惊叹的视觉效果。 Resolume Arena 7支持多种媒体格式&#xff0c;包括视频文…