Live Sass Compiler 是 VSCode 中轻量实用的 SCSS/Sass 实时编译扩展，无需 Node.js 或全局 Sass，支持自动编译、source map、多格式输出及浏览器刷新，但不支持 @use/@forward 和 HMR。
live sass compiler 是 vscode 中一个轻量但实用的扩展，能自动将 .sass 或 .scss 文件实时编译为 css，并可选生成 source map 和自动刷新浏览器。它不依赖 node.js 环境或全局安装 sass，开箱即用，适合中小型项目快速开发。
如何安装与基础配置
在 VSCode 扩展市场中搜索 “Live Sass Compiler”，安装后重启编辑器即可生效。默认情况下，只要打开含 .scss 或 .sass 文件的文件夹，保存时就会自动生成同名 .css 文件（如 style.scss → style.css）。
- 首次使用建议右键点击 SCSS 文件，选择 “Watch My Sass” 启动监听
- 编译输出路径可通过设置调整，默认为 SCSS 文件同级目录；可在 settings.json 中修改
"liveSassCompile.settings.formats"控制格式和位置 - 支持同时输出 expanded（展开）和 compressed（压缩）两种 CSS 格式，只需在 formats 数组中添加对应项
常用自定义配置示例
在工作区或用户设置的 settings.json 中添加以下内容，可按需定制：
-
改变输出目录：比如统一输出到
./css/，设置"savePath": "./css/" -
启用 sourceMap：设
"sourceMap": true，方便调试原始 SCSS 行号 -
忽略特定文件：用
"ignoreList": ["**/node_modules/**", "**/_*.scss"]排除部分文件 -
自动刷新浏览器：需配合 Live Server 扩展，开启
"liveServerPort": 3000并确保端口一致
常见问题与注意事项
Live Sass Compiler 虽便捷，但也有局限性，使用前需留意：
- 不支持
@use和@forward（仅兼容旧版@import），如项目已全面迁移到 Dart Sass 模块系统，建议改用官方sassCLI 或构建工具 - 无法处理跨文件夹的相对路径别名（如
~styles/vars.scss），路径需写实际相对位置 - 监听是基于文件保存触发，不是真正的“实时”（无文件改动则不编译），也不支持热模块替换（HMR）
- 多个 SCSS 入口文件会各自生成独立 CSS，如需合并，仍需借助 import 或构建流程
基本上就这些。对学习阶段或静态页面开发来说，Live Sass Compiler 真的够用、不复杂但容易忽略配置细节。
立即学习“前端免费学习笔记（深入）”；
