vue3设置全局css变量

news2024/12/16 11:44:18

1、common.scss文件中定义全局变量

$common-color: red;

2、在vite.config.js中导入common.scss文件

    defineConfig({
        css: {
            // css预处理器
            preprocessorOptions: {
                scss: {
                    charset: false,
                    additionalData: '@import "./src/styles/common.scss";',
                },
            },
        }
    })

3、页面中使用变量

.test-color {
    color: $common-color;
}

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

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

相关文章

《九重紫》逐集分析鉴赏第一集(下)

主标题:《九重紫》一起追剧吧 副标题:《九重紫》逐集分析鉴赏第一集(下)/《九重紫》逐集分析鉴赏1 接上回分解,窦昭和宋墨都安置城外万佛寺 交谈没一会儿,天还未亮,兵临寺下 记住这个人&…

Summarizing and Understanding Large Graphs

Summarizing and Understanding Large Graphs【总结和理解大规模图】 ☆ 研究背景 大规模图的理解和可视化是一个重要的开放性问题现有的社区发现和聚类方法无法很好地总结图的特征需要一种能够发现和描述图中重要结构的方法 ★ 成果简介 提出了VoG(Vocabulary-based summar…

人工智能系统

介绍人工智能 的基础书 点击这里 1.1 深度学习的历史,现状与发展 本章将介绍深度学习的由来,现状和趋势,让读者能够了解人工智能系统之上的深度学习负载的由来与趋势,为后面理解深度学习系统的设计和权衡形成初步的基础。我们在后…

康佳Android面试题及参考答案(多张原理图)

JVM 内存分布和分代回收机制是什么? JVM 内存主要分为以下几个区域。 堆(Heap)是 JVM 管理的最大的一块内存区域,主要用于存放对象实例。所有线程共享堆内存,在堆中又分为年轻代(Young Generation)和老年代(Old Generation)。年轻代又分为 Eden 区和两个 Survivor 区(…

(css)element中el-select下拉框整体样式修改

(css)element中el-select下拉框整体样式修改 重点代码(颜色可行修改) // 修改input默认值颜色 兼容其它主流浏览器 /deep/ input::-webkit-input-placeholder {color: rgba(255, 255, 255, 0.50); } /deep/ input::-moz-input-placeholder {color: rgba…

论文概览 |《Sustainable Cities and Society》2024.12 Vol.116

本次给大家整理的是《Sustainable Cities and Society》杂志2024年12月第116期的论文的题目和摘要,一共包括52篇SCI论文! 论文1 Enhancing road traffic flow in sustainable cities through transformer models: Advancements and challenges 通过变压…

【电源专题】开关转换器的三种过流保护方案

开关转换器内部集成功率开关,使限流保护成为基本功能。常用限流方案有三种:恒流限流、折返限流和打嗝模式限流。 恒流限流 对于恒流限流方案,当发生过载情况时,输出电流保持恒定值(ILIMIT)。因此,输出电压会下降。这种方案通过逐周期限流实现,利用流经功率开关的峰值电感…

网络与安全

文章目录 网络协议OSI七层模型TCP/IP协议族TCP协议UDP协议HTTP协议HTTPS协议 SocketSocket编程粘包与拆包 网络安全常见网络攻击及防护放火墙网络加密技术 跨域问题 网络协议 网络协议是计算机网络中设备和系统之间进行数据交换的规则和约定。它定义了数据的格式、传输方式、处…

鸿蒙项目云捐助第六讲鸿蒙App应用的首页导航资讯推荐功能的实现

鸿蒙项目云捐助第六讲鸿蒙App应用的首页导航资讯推荐功能的实现 前面的教程中已实现了启动页,登录页,注册页及首页的部分功能。这里有一些朋友提出问题,如何设置登录页面的背景图片。这里稍带说一个这个功能的实现。 一、登录页面的背景图片…

SpringCloud微服务实战系列:03spring-cloud-gateway业务网关灰度发布

目录 spring-cloud-gateway 和zuul spring webflux 和 spring mvc spring-cloud-gateway 的两种模式 spring-cloud-gateway server 模式下配置说明 grayLb://system-server 灰度发布代码实现 spring-cloud-gateway 和zuul zuul 是spring全家桶的第一代网关组件&#x…

【蓝桥杯每日一题】推导部分和——带权并查集

推导部分和 2024-12-11 蓝桥杯每日一题 推导部分和 带权并查集 题目大意 对于一个长度为 ( N ) 的整数数列 A 1 , A 2 , ⋯ , A N A_1, A_2, \cdots, A_N A1​,A2​,⋯,AN​ ,小蓝想知道下标 ( l ) 到 ( r ) 的部分和 ∑ i l r A i A l A l 1 ⋯ A r \sum_{…

[代码随想录17]二叉树之最大二叉树、合并二叉树、二搜索树中的搜索、验证二叉搜索树。

前言 二叉树的题目还是要会一流程构造函数之类的。其中还有回溯的思想 题目链接 654. 最大二叉树 - 力扣(LeetCode) 一、最大二叉树 思路:还是考察构造二叉树,简单来说就是给你一个数组去构建一个二叉树,递归来解决就…

让 Win10 上网本 Debug 模式 QUDPSocket 信号槽 收发不丢包的方法总结

在前两篇文章里,我们探讨了不少UDP丢包的解决方案。经过几年的摸索测试,其实方法非常简单, 无需修改代码。 1. Windows 下设置UDP缓存 这个方法可以一劳永逸解决UDP的收发丢包问题,只要添加注册表项目并重启即可。即使用Qt的信号与槽&#…

水凝胶微机器人:复杂体内环境的“导航高手”

大家好!今天来了解一项关于成像引导的生物可吸收声学水凝胶微型机器人(BAM)的研究——《Imaging-guided bioresorbable acoustic hydrogel microrobots》发表于《SCIENCE ROBOTICS》。这项研究为生物医学工程领域带来了新的突破,有…

噪杂环境(房车改装市场)离线语音通断器模块

一直在坚持,却很难有机会上热门,在现在这个以流量为导向的时代,貌似很难靠所谓的坚守和热爱把产品成功的推向市场了。目前的客户仍然是以老客户为主,应用场景主要是房车改装,根据九客户的需求定制化一些模块。因为没有…

Liinux下VMware Workstation Pro的安装,建议安装最新版本17.61

建议安装最新版本17.61,否则可能有兼容性问题 下载VMware Workstation安装软件 从官网网站下载 https://support.broadcom.com/group/ecx/productdownloads?subfamilyVMwareWorkstationPro 选择所需版本 现在最新版本是17.61,否则可能有兼容性问题…

数据结构速成

1. 数据结构与算法 2. 顺序表 3. 链表 4. 栈与队列 5. 串 6. 树与二叉树(1) 7. 树与二叉树(2) 8. 图 9. 图的应用 10. 查找 11. 排序(1) 12. 排序(2)

巅峰极客2024

Misc Misc题搞得有点像re病毒分析,不过misc成分还是比较高 源文件有upx壳,脱完了获得的程序沙箱跑不出来 IDA分析一下发现有虚拟机检测,所以只能在本地运行 运行后释放了两个文件 图片其实在释放程序中能找到 file文件上传沙箱后显示是木马…

gorm源码解析(二):核心设计与初始化

文章目录 前言基本使用初始化db实例定义model增删改查 数据结构gorm.DBStatementSchema元数据clone 初始化初始化DB初始化dialector用dialector初始化db注册crud函数执行器processor注册callback Clause抽象解析元数据解析schema解析field 总结 前言 上一篇文章介绍了什么是OR…

科研绘图系列:R语言绘制网络图和密度分布图(network density plot)

禁止商业或二改转载,仅供自学使用,侵权必究,如需截取部分内容请后台联系作者! 文章目录 介绍加载R包数据下载图1图2图3图4图5图6图7图8系统信息参考介绍 R语言绘制网络图和密度分布图(network & density plot) 加载R包 library(magrittr) library(dplyr) library(…