普通 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.pswp.cn/bicheng/79401.shtml
繁體地址,請注明出處:http://hk.pswp.cn/bicheng/79401.shtml
英文地址,請注明出處:http://en.pswp.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…