普通 html 项目也可以支持 scss_sass

项目结构示例

在这里插入图片描述

下载vscode的插件Live Sass Compiler

自动监听编译scss

在这里插入图片描述

下载插件Live Server

用于 web 服务器,打开 html 文件到浏览器,也可以不用这个,自己用 nginx 或者宝塔其他 web 工具

在这里插入图片描述

新建一个 index.scss打开,点击 vscode 底部的按钮启动监听

每次修改 scss 文件,都是会自动生成 index.css,项目引入这个文件使用

在这里插入图片描述

在这里插入图片描述

根目录已生成同名的 css 文件

在这里插入图片描述

index.html 引入使用

在这里插入图片描述

启动 web 服务器看效果

在这里插入图片描述

点击按钮后,会自动打开默认浏览器打开页面

在这里插入图片描述

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

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

相关文章

网工_IP协议

2025.02.17:小猿网&网工老姜学习笔记 第19节 IP协议 9.1 IP数据包的格式(首部数据部分)9.1.1 IP协议的首部格式(固定部分可变部分) 9.2 IP数据包分片(找题练)9.3 TTL生存时间的应用9.4 常见…

SQL语句练习 自学SQL网 在查询中使用表达式 统计

目录 Day 9 在查询中使用表达式 Day 10 在查询中进行统计 聚合函数 Day 11 在查询中进行统计 HAVING关键字 Day12 查询执行顺序 Day 9 在查询中使用表达式 SELECT id , Title , (International_salesDomestic_sales)/1000000 AS International_sales FROM moviesLEFT JOIN …

基于机器学习的舆情分析算法研究

标题:基于机器学习的舆情分析算法研究 内容:1.摘要 随着互联网的飞速发展,舆情信息呈现爆炸式增长,如何快速准确地分析舆情成为重要课题。本文旨在研究基于机器学习的舆情分析算法,以提高舆情分析的效率和准确性。方法上,收集了近…

菲索旋转齿轮法:首次地面光速测量的科学魔术

一、当齿轮邂逅光束:19世纪的光速实验室 1849年,法国物理学家阿曼德菲索(Armand Fizeau)在巴黎郊外的一座庄园里,用一组旋转齿轮、一面镜子和一盏油灯,完成了人类首次地面光速测量。他的实验测得光速为315…

上位机知识篇---PSRAM和RAM

文章目录 前言一、RAM(Random Access Memory)1. 核心定义分类:SRAM(静态RAM)DRAM(动态RAM) 2. 关键特性SRAM优点缺点应用 DRAM优点缺点应用 3. 技术演进DDR SDRAMLPDDR(低功耗DRAM&a…

Qt QComboBox 下拉复选多选(multicombobox)

Qt QComboBox 下拉复选多选(multicombobox),备忘,待更多测试 【免费】QtQComboBox下拉复选多选(multicombobox)资源-CSDN文库

ElasticSearch深入解析(五):如何将一台电脑上的Elasticsearch服务迁移到另一台电脑上

文章目录 0.安装数据迁移工具1.导出数据2.导出mapping3.导出查询模板4.拷贝插件5.拷贝配置6.导入到目标电脑上 0.安装数据迁移工具 Elasticsearch dump是一个用于将Elasticsearch索引数据导出为JSON格式的工具。你可以使用Elasticsearch dump通过命令行或编程接口来导出数据。…

微服务中组件扫描(ComponentScan)的工作原理

微服务中组件扫描(ComponentScan)的工作原理 你的问题涉及到Spring框架中ComponentScan的工作原理以及Maven依赖管理的影响。我来解释为什么能够扫描到common模块的bean而扫描不到其他模块的bean。 根本原因 关键在于**类路径(Classpath)**的包含情况: Maven依赖…

Python镜像源配置:

1.用命令进行配置: 1. 使用命令行方式更改镜像源 可以直接通过 pip config 命令来设置全局或用户级别的镜像源地址。例如,使用清华大学开源软件镜像站作为新的索引 URL: pip config set global.index-url https://pypi.tuna.tsinghua.edu.…

【SpringBoot】Spring中事务的实现:声明式事务@Transactional、编程式事务

1. 准备工作 1.1 在MySQL数据库中创建相应的表 用户注册的例子进行演示事务操作,索引需要一个用户信息表 (1)创建数据库 -- 创建数据库 DROP DATABASE IF EXISTS trans_test; CREATE DATABASE trans_test DEFAULT CHARACTER SET utf8mb4;…

javascript 深拷贝和浅拷贝的区别及具体实现方案

一、核心区别 特性浅拷贝深拷贝复制层级仅复制对象的第一层属性递归复制对象的所有层级属性(包括嵌套对象和数组)引用关系嵌套对象/数组与原对象共享内存(引用拷贝)嵌套对象/数组与原对象完全独立(值拷贝)…

pytorch对应gpu版本是否可用判断逻辑

# gpu_is_ok.py import torchdef check_torch_gpu():# 打印PyTorch版本print(f"PyTorch version: {torch.__version__}")# 检查CUDA是否可用cuda_available torch.cuda.is_available()print(f"CUDA available: {cuda_available}")if cuda_available:# 打印…

国内无法访问GitHub官网的问题解决

作为一名程序员,在国内访问GitHub官网经常会遇到打开过慢或者访问失败的问题,但通过一些技巧可以改善访问体验。GitHub访问问题的根源在于GitHub官网访问不稳定的主要原因在于DNS解析过程。当我们直接访问github.com时,需要通过DNS服务器将域…

使用 MediaPipe 和 OpenCV 快速生成人脸掩膜(Face Mask)

在实际项目中,尤其是涉及人脸识别、换脸、图像修复等任务时,我们经常需要生成人脸区域的掩膜(mask)。这篇文章分享一个简单易用的小工具,利用 MediaPipe 和 OpenCV,快速提取人脸轮廓并生成二值掩膜图像。 …

【动态导通电阻】GaN功率器件中动态导通电阻退化的机制、表征及建模方法

2019年,浙江大学的Shu Yang等人在《IEEE Journal of Emerging and Selected Topics in Power Electronics》上发表了一篇关于GaN(氮化镓)功率器件动态导通电阻(Dynamic On-Resistance, RON)的研究论文。该文深入探讨了GaN功率器件中动态导通电阻退化的机制、表征方法、建模…

从括号匹配看栈:数据结构入门的实战与原理

在计算机科学的世界里,数据结构是程序员的 “瑞士军刀”,不同的数据结构适用于不同的场景,能高效解决各类问题。其中,栈作为一种简单却强大的数据结构,在很多实际应用中发挥着关键作用。今天,我们就通过一个…

Dubbo(89)如何设计一个支持多语言的Dubbo服务?

设计一个支持多语言的Dubbo服务需要考虑以下几个方面: 服务接口设计:确保服务接口的定义可以被不同语言实现。序列化协议:选择一个支持多语言的序列化协议,例如Protobuf、Thrift、gRPC等。服务注册与发现:确保服务注册…

力扣面试150题--分隔链表

day 39 题目描述 思路 遍历链表,每一个点与值比较,比值小就继续,比值大就放到链表尾部即可 /*** Definition for singly-linked list.* public class ListNode {* int val;* ListNode next;* ListNode() {}* ListNode(int…

VSCode 查看文件的本地修改历史

1. 使用时间线视图(Timeline) 新版 VSCode 内置了一个叫 Timeline(时间线) 的功能,可以查看: 本地文件修改记录(包括保存历史)Git 提交历史(如果仓库是 Git 管理的&…

C++学习-入门到精通-【3】控制语句、赋值、自增和自减运算符

C学习-入门到精通-【3】控制语句、赋值、自增和自减运算符 控制语句、赋值、自增和自减运算符 C学习-入门到精通-【3】控制语句、赋值、自增和自减运算符一、什么是算法二、伪代码三、控制结构顺序结构选择结构if语句if...else语句switch语句 循环结构while语句 四、算法详述&a…