当前位置: 首页 > web >正文

普通 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.xdnf.cn/news/3397.html

相关文章:

  • 一个linux系统电脑,一个windows电脑,怎么实现某一个文件夹共享
  • 使用Delphi 和 CrossVcl 开发基于VCL的 macOS 和 Linux 应用程序简介
  • C++11新的特性
  • 基本功能学习
  • 从 Python 基础到 Django 实战 —— 数据类型驱动的 Web 开发之旅
  • 系统思考:企业效率提升关键
  • Unity动态列表+UniTask异步数据请求
  • 如何测试调用RagFlow的API功能
  • 《社交类应用开发:React Native与Flutter的抉择》
  • 【Java】HashMap
  • JGA811Ⅱ大气污染治理实训平台实验装置
  • Python学习笔记(第三部分)
  • (007)Excel 公式的使用
  • 【Machine Learning Q and AI 读书笔记】- 04 彩票假设
  • Linux系统中升级GNU Make构建工具版本至4.4.1
  • 深入解析Session与Cookie:从HTTP无状态到现代会话管理
  • 【树莓派Pico FreeRTOS】-FreeRTOS-SMP移植
  • MySQL事务隔离级别详解
  • 装饰器设计模式(Decorator Pattern)详解
  • React Redux 与 Zustand
  • Python10天冲刺-设计模型之策略模式
  • 定义一个3D cube,并计算cube每个顶点的像素坐标
  • Rust中避免过度使用锁导致性能问题的策略
  • 【音频】基础知识
  • Elasticsearch 根据两个字段搜索
  • Python项目源码69:Excel数据筛选器1.0(tkinter+sqlite3+pandas)
  • 约玩、搭子组局、线下约玩、助教系统源码
  • VSCode开发调试Python入门实践(Windows10)
  • HTTP知识速通
  • 计算机网络实验七:数据抓包与协议分析