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…

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、绪论…

【多线程面试题十五】、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…

Matlab中的app设计

1.窗口焦点问题&#xff1a; 窗口焦点问题&#xff1a;确保你的应用程序窗口正常处于焦点状态。有时&#xff0c;其他窗口的弹出或焦点切换可能导致应用程序最小化。点击应用程序窗口以确保它处于焦点状态。 窗口管理&#xff1a;确保你的 MATLAB 或操作系统没有未处理的错误或…

​测绘人注意,你可能会改变历史!

你也许想不到&#xff0c;曾经有一个测绘人员在进行实地测量作业时&#xff0c;在地图上就这么随手一标注&#xff0c;却让这个地方成为了如今的网红打卡地。 这个地方就是外地游客慕名而来的“宽窄巷子”&#xff0c;如果连这个地方都不知道的成都人&#xff0c;就应该不能算…

CSS3表格和表单样式

在传统网页中&#xff0c;表格主要用于网页布局&#xff0c;因此也成为网页编辑的主要工具&#xff1b;在标准化网页设计中&#xff0c;表格的主要功能是显示数据&#xff0c;也可适当辅助结构设计。本章主要介绍如何使用CSS控制表格和表单的显示效果&#xff0c;如表格和表单的…

快速入门:使用 Spring Boot 构建 Web 应用程序

前言 本文将讨论以下主题&#xff1a; 安装 Java JDK、Gradle 或 Maven 和 Eclipse 或 IntelliJ IDEA创建一个新的 Spring Boot 项目运行 Spring Boot 应用程序编写一个简单的 Web 应用程序打包应用程序以用于生产环境 通过这些主题&#xff0c;您将能够开始使用 Spring Boo…

oracle (9)Storage Relationship Strut

Storage & Relationship Strut 存储和关系支柱 目标&#xff1a; 描述数据库的逻辑结构列出段类型其用途列出控制块空间使用的关键字获取存储结构信息 一、基础知识 1、数据库逻辑结构图 2、Types of Segments 段的类型 3、Storage Clause Precedence 存储条款的优先顺序 …

Spring Cloud之Docker的学习【详细】

目录 Docker 项目部署问题 总结 镜像与容器 Docker的安装 Docker基本操作 镜像相关命令 拉取镜像 镜像保存 删除镜像 镜像加载 容器相关命令 删除容器 数据卷 数据卷命令 数据挂载 自定义镜像 Dockerfile 案例 Docker-Compose Compose文件 Docker-Compos…