推荐使用 dart sass 的 sass --watch 命令监听 scss 文件，支持单文件、多文件及目录监听，需注意路径分隔符为 : 且不可空格分隔；vs code 中应配置 live sass compiler 输出路径并搭配 live server 实现自动刷新。
用 sass --watch 监听单个或多个 SCSS 文件
命令行最直接的方式就是 sass --watch，它不依赖 VS Code 插件，也不需要 Node.js 全局安装额外工具链（只要已装 sass CLI）。常见错误是误用旧版 node-sass —— 官方早在 2020 年就弃用了它，现在推荐用 Dart Sass（sass 包），通过 npm install -g sass 安装。
监听单个文件：
sass --watch src/style.scss:dist/style.css
监听多个文件（空格分隔）：
sass --watch src/a.scss:dist/a.css src/b.scss:dist/b.css
监听整个目录（推荐用于项目初期）：
-
sass --watch scss:css—— 将scss/下所有.scss文件编译到css/，保持同名结构 -
sass --watch .—— 监听当前目录及子目录所有.scss，输出同名.css到原位置（注意：会污染源目录）
关键点：: 是路径分隔符，左边是输入（SCSS），右边是输出（CSS），不能写成 --watch scss/ css/ 这种空格分隔形式，否则报错 Invalid argument: "css/"。
VS Code 中用 Live Sass Compiler 实现保存即编译
如果你习惯在编辑器里操作，Live Sass Compiler 扩展比手动敲命令更省心，但它默认把 CSS 输出到和 SCSS 同目录，容易混淆。必须手动配置 settings.json 指定输出路径，否则 liveServer 可能加载错文件。
典型配置示例（放在工作区根目录的 .vscode/settings.json 中）：
{
"liveSassCompile.settings.formats": [
{
"format": "expanded",
"extensionName": ".css",
"savePath": "/dist/css/"
}
],
"liveSassCompile.settings.generateMap": true,
"liveSassCompile.settings.watchSass": true
}
注意几个易踩坑点：
-
savePath是相对路径，以项目根目录为基准，/dist/css/表示输出到./dist/css/，不是绝对路径 - 启动监听必须点击右下角
Watch Sass按钮，或按Ctrl+Shift+P→ 输入Live Sass: Watch Sass，仅靠保存不会触发（除非启用了watchSass） - 如果
.scss文件里有语法错误，编译会失败，但终端不弹窗提醒——得看 VS Code 底部状态栏的红色提示，或打开Output面板选Live Sass Compiler
配合 Live Server 实现浏览器自动刷新
Live Sass Compiler 只负责生成 CSS，不负责刷新页面。必须搭配 Live Server 才算“实时预览”。很多人卡在这一步：HTML 中引用的 CSS 路径和实际输出路径不一致，导致样式没更新。
检查三件事：
- HTML 的
<link rel="stylesheet" href="dist/css/style.css">路径必须和savePath配置完全匹配 - 用右键菜单的
Open with Live Server启动服务，不要直接双击 HTML 或用其他服务器（比如 Python 的http.server），后者不支持热重载 - 确保
Live Server的liveSassCompile.settings.enableCssPropose关闭，否则可能干扰 CSS 补全
验证是否生效：改一行 $color 变量 → 保存 SCSS → 看 VS Code 右下角是否出现 “Compiled” 提示 → 浏览器是否自动刷新并呈现新样式。如果只编译没刷新，大概率是 HTML 引入路径错了。
为什么不用 node-sass --watch？
因为 node-sass 已被官方标记为 deprecated，它的底层 LibSass 在 2021 年停止维护。你现在运行 npm install node-sass，控制台会明确警告：Node Sass does not support the current version of Node.js —— 尤其在 Node.js ≥18 或使用 Apple Silicon Mac 时，编译极大概率失败。
替代方案只有两个：
- 用 Dart Sass：
sass --watch（推荐，纯 JS 实现，无 native binding，兼容性好） - 用
dart-sass的 npm 包：npx sass --watch，避免全局安装，适合 CI 或多版本 Node 环境
顺带一提：sass --watch 默认生成 .css.map 文件，但浏览器要启用 “Enable CSS source maps” 才能在 DevTools 里点进 SCSS 行号调试——这点常被忽略，导致以为 source map 没生效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
