普通 html 项目也可以支持 scss_sass

项目结构示例

下载vscode的插件Live Sass Compiler

自动监听编译scss

下载插件Live Server

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

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

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

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

index.html 引入使用

启动 web 服务器看效果

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

相关推荐
anOnion2 天前
构建无障碍组件之Radio group pattern
前端·html·交互设计
前端Hardy3 天前
HTML&CSS&JS:丝滑无卡顿的明暗主题切换
javascript·css·html
前端Hardy4 天前
HTML&CSS&JS:基于定位的实时天气卡片
javascript·css·html
前端Hardy4 天前
HTML&CSS:纯CSS实现随机转盘抽奖机——无JS,全靠现代CSS黑科技!
css·html
DeathGhost4 天前
分享URL地址到微信朋友圈没有缩略图?
前端·html
前端Hardy5 天前
HTML&CSS:高颜值产品卡片页面,支持主题切换
css·html
Never_Satisfied5 天前
在HTML & CSS中,nth-child、nth-of-type详解
前端·css·html
你怎么知道我是队长5 天前
前端学习---HTML---块元素和行内元素
前端·学习·html
holeer5 天前
【V1.0】Typora 中的 HTML 支持|软件文档自翻译
前端·编辑器·html·typora·web·markdown·文档
肖。35487870945 天前
[html-1]双板块最简界面,适合用于有两个网页分发,跳转。
html