vite vue3 ts 使用sass 设置样式变量 和重置默认样式

1.安装scss 样式支持依赖

yarn add -D sass

2.使用sass

<div><!-- 测试使用sass --><h1>测试使用sass</h1>
</div><style scope lang="scss">
div {h1 {color: red;}
}
</style>

效果:

3.通过npm下载并复制清除样式代码,并在assets/css/reset.scss中粘贴

4.新建assets//css/index.scss全局样式文件,引入reset.scss文件, 然后在main.ts中全局引入

// index.scss
// 引入清除默认样式文件
@import "./reset.scss"

清除默认样式成功:

5.配置全局样式变量,新建assets/css/global.scss文件,存储整个项目需要的样式变量

// 本文件配置的是sass全局变量,需要在vite.config.ts中引入,变量使用$开头
$base-color: #2803f7;

6.在vite.config.ts中配置全局样式变量

// 配置样式sass 全局变量css: {preprocessorOptions: {scss: {javascriptEnabled: true,additionalData: '@import "./src/assets/css/global.scss";',},},},

7.使用全局样式变量

<style scope lang="scss">
div {h1 {color: $base-color;}
}
</style>

全局样式变量使用成功:

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

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

相关文章

Spring Cloud之Gateway网关学习【详细】

目录 统一网关Gateway 网关的实现 搭建网关 编写配置文件 路由断言工程 路由的过滤器 全局过滤器 网关过滤器执行顺序 网关的cors跨域配置 问题及解决 统一网关Gateway 网关的实现 SpringCloud中存在两种网关 gateway&#xff1a;基于Spring5中提供的WebFlux实现&a…

docker导致远程主机无法访问,docker网段冲突导致主机网络异常无法访问

背景&#xff1a; 公司分配的虚拟机是172网段的&#xff0c;在上面部署了docker、docker-compose、mysql、redis,程序用docker-compose管理&#xff0c;也平稳运行了一个多周&#xff0c;某天用FinalShell连主机重启docker容器&#xff0c;忽然断开连接&#xff0c;然后虚拟机就…

【base64加密】js/ts的基础加密

base64的字符串简单加密&#xff0c;主用于网页缓存数据的加密。 适用于常规html、小游戏&#xff08;egret、cocos、laya&#xff09;等 原文参考&#xff1a;JS基于base64编码加密解密文本和图片&#xff08;修订&#xff09;_js base64加密-CSDN博客 测试&#xff1a;JS实…

JAVA安全入门之反射

反射 对于反射这个概念来说&#xff0c;直白的讲就是&#xff1a; 对象可以通过反射获取他的类&#xff0c;类可以通过反射拿到所有⽅法&#xff08;包括私有&#xff09;&#xff0c;拿到的⽅法可以调⽤而众所周知 JAVA 是一门静态语言&#xff0c;我们通过反射就可以达到动…

322. 零钱兑换 279.完全平方数

322. 零钱兑换 题目&#xff1a; 给一个不同数额硬币的数组和一个目标金额&#xff0c;硬币可取无限次&#xff0c;求用硬币达到总金额的最小硬币数量。&#xff08;求不同组合数/排列数&#xff0c;但是硬币数量最小&#xff09; 思路&#xff1a; 求硬币数量最小&#x…

数据中台租户概念

数据中台是一种将数据作为核心资源进行管理和共享的架构模式。它通过集中管理组织内部各个业务系统产生的数据&#xff0c;并提供一套通用的数据服务和工具&#xff0c;以满足不同业务需求的数据访问、整合和分析等需求。 在数据中台中引入了租户的概念&#xff0c;租户是指数…

Unity 粒子特效-第三集-星星闪烁特效

一、特效预览 二、制作原理 星星素材资源 链接&#xff1a;https://pan.baidu.com/s/17D-9sC-ErtqmUxl81Ln1Mw?pwdndm9 提取码&#xff1a;ndm9 1.素材介绍 仔细看&#xff0c;我们的粒子贴图是&#xff08;如下&#xff09;&#xff0c;一颗星星 2.步骤介绍 1.星星动画的…

【如何写论文】硕博学位论文的结构框架、过程与大纲分析

硕士论文可以说是毕业前最重要的一部分&#xff0c;也可以说是展示和检验你3年研究生学习的成果的一个考试。硕士论文答辩和检验合格&#xff0c;才能够顺利拿到毕业生和学位证&#xff0c;可见其重要性。 目录 一、基础框架1.1、摘要&#xff08;Abstract&#xff09;1.2、绪论…

MySQL WITH AS及递归查询

MySQL WITH AS及递归查询 WITH AS 官网&#xff1a;WITH 是 SQL 中的一个关键字&#xff0c;用于创建临时表达式&#xff08;也称为 Common Table Expression&#xff0c;CTE&#xff09;&#xff0c;它允许你在一个查询中临时定义一个表达式&#xff0c;然后在后续的查询中引…

【多线程面试题十五】、synchronized可以修饰静态方法和静态代码块吗?

文章底部有个人公众号&#xff1a;热爱技术的小郑。主要分享开发知识、学习资料、毕业设计指导等。有兴趣的可以关注一下。为何分享&#xff1f; 踩过的坑没必要让别人在再踩&#xff0c;自己复盘也能加深记忆。利己利人、所谓双赢。 面试官&#xff1a;synchronized可以修饰静…

灯串上亚马逊加拿大合规标准CSA认证如何办理?

灯串 灯串和配件都是插头连接的便携式、临时性商品&#xff0c;最大额定输入电压为 120 伏。 本政策适用于季节性照明、装饰性灯具以及灯串。 亚马逊灯串政策 根据亚马逊的要求&#xff0c;所有季节性和装饰性灯串均应经过检测&#xff0c;并且遵守下列法规、标准和要求&…

AUTOSAR CAN协议栈架构总览介绍

Classic AUTOSAR层级架构简介 如下图是Classic AUTOSAR层级架构图,每个层主要功能如下 微控制器抽象层:使上层软件和微处理器型号无关,包含MCU中内部外设的驱动以及MCU内存映射的外部设备的驱动ECU抽象层:使上层软件和ECU硬件设计无关,包含ECU板上外部设备的驱动以及内部…

Hi3516DV500部署paddle版型分析模型记录

原版模型测试并导出onnx paddle 版面分析-> https://github.com/PaddlePaddle/PaddleOCR/blob/release/2.7/ppstructure/layout/README_ch.md 测试 python3 deploy/python/infer.py \ --model_dirmodel/picodet_lcnet_x1_0_fgd_layout_cdla_infer/ \ --image_fil…

Apache Dolphinscheduler如何不重启解决Master服务死循环

个人建议 Apache Dolphinscheduler作为一个开源的调度平台&#xff0c;目前已经更新到了3.X版本&#xff0c;4.0版本也已经呼之欲出。3.0版本作为尝鲜版本&#xff0c;新添加了许多的功能&#xff0c;同时也存在非常多的隐患&#xff0c;本人使用3.0版本作为生产调度也踩了很多…

Android开发知识学习——TCP / IP 协议族

文章目录 学习资源来自&#xff1a;扔物线TCP / IP 协议族TCP连接TCP 连接的建立与关闭TCP 连接的建立为什么要三次握手&#xff1f; TCP 连接的关闭为什么要四次挥手&#xff1f; 为什么要⻓连接&#xff1f; 常见面试题课后题 学习资源来自&#xff1a;扔物线 TCP / IP 协议…

OpenCV学习(一)——图像读取

1. 图像入门 读取图像显示图像写入图像 import cv2# 读取图像 img cv2.imread(lena.jpg) print(img.shape)# 显示图像 cv2.imshow(image, img) cv2.waitKey(0) cv2.destroyAllWindows()# 写入图像 cv2.imwrite(image.jpg, img)1.1 读取图像 读取图像cv.imread(filename, fl…

人工智能-softmax回归

回归可以用于预测多少的问题。 比如预测房屋被售出价格&#xff0c;或者棒球队可能获得的胜场数&#xff0c;又或者患者住院的天数。 事实上&#xff0c;我们也对分类问题感兴趣&#xff1a;不是问“多少”&#xff0c;而是问“哪一个”&#xff1a; 某个电子邮件是否属于垃圾…

最新版本QGIS 开始支持cesium 3D TILE 数据源了

最新版本QGIS 也开始支持3D TILE 数据源了!加载和运行速度也是慢&#xff0c;不过都这样&#xff0c;也不是qgis的问题!这东西对网络和性能要求比较高!据说这是cesium社区提供基金让qgis团队开发的&#xff0c;cesium社区真是很有钱啊&#x1f601;&#xff0c;不过也不奇怪&am…

分享8个分布式Kafka的使用场景

Kafka 最初是为海量日志处理而构建的。它保留消息直到过期&#xff0c;并让消费者按照自己的节奏提取消息。与它的前辈不同&#xff0c;Kafka 不仅仅是一个消息队列&#xff0c;它还是一个适用于各种情况的开源事件流平台。 1. 日志处理与分析 下图显示了典型的 ELK&#xff0…