用 vscode 自带的 live sass compiler 插件最省事，因其轻量免配置、内置 dart sass 引擎、保存即编译，且无需 node.js 全局依赖或构建工具。
为什么用 VSCode 自带的 Live Sass Compiler 插件最省事
VSCode 本身不编译 Sass，得靠插件；Live Sass Compiler 是目前最轻量、配置门槛最低的选择，不用装 Node.js 全局依赖，也不用写 package.json 或配 gulp。它直接监听 .scss 和 .sass 文件，保存即编译，适合单页项目或快速原型。
- 只支持
.scss和.sass，不处理.css或其他预处理器 - 默认输出同目录下的
.css文件，不生成.css.map，如需 Source Map 得手动开开关 - 不兼容旧版 Ruby Sass（已淘汰），但所有现代 Dart Sass 语法都支持
- 如果项目里已有
sass命令行工具，它不会调用——它用的是内嵌的 Dart Sass 引擎
安装后必须改的三个配置项
插件装完默认行为常不符合实际需求：CSS 跑错目录、没压缩、没 map 文件。关键配置都在 VSCode 设置里的 liveSassCompile.settings 下，不是插件页面点点就完事。
-
liveSassCompile.settings.formats：定义输出格式，比如[{"format": "expanded", "extensionName": ".css", "savePath": "/css/"}]表示生成未压缩 CSS，并存到当前项目根目录下的/css/子目录 -
liveSassCompile.settings.savePath：如果设了这个，会覆盖上面formats里的savePath，容易误冲突，建议只用formats统一管 -
liveSassCompile.settings.generateMap：布尔值，设为true才生成.css.map，否则调试时找不到源 SCSS 行号
保存不触发编译？先查这三处
常见现象是改完 _header.scss 保存，但 style.css 没更新，控制台也没报错——大概率不是插件坏了，而是路径或命名卡住了。
- 文件名以
_开头（如_mixins.scss）默认被跳过编译，这是 Sass 规范，不是插件 bug；想强制编译，得在liveSassCompile.settings.includeItems里显式加路径，比如["**/_mixins.scss"] - 工作区根目录没打开，或者打开了多文件夹工作区（Workspace），插件可能只监控第一个文件夹，检查左下角状态栏是否显示了正确的文件夹名
- 文件编码不是 UTF-8（比如带 BOM 的 ANSI），某些版本插件会静默失败，用 VSCode 右下角编码切换器改成
UTF-8再试
和命令行 sass --watch 冲突怎么办
如果项目里同时跑了 sass --watch，又开了 Live Sass Compiler，两个进程可能同时写同一个 .css 文件，导致内容错乱或写入失败，尤其在 Windows 上更明显。
- 优先关掉终端里的
sass --watch，VSCode 插件足够稳，且响应更快 - 如果必须共存（比如 CI 需要 CLI 输出），把插件的输出路径设成和 CLI 不同的目录，比如插件输出到
/dev/css/，CLI 输出到/dist/css/ - 插件不支持
@use的自定义函数导入路径别名（如@use 'src/utils' as u），遇到解析错误时，先确认路径是相对编译入口文件的，不是相对当前文件的
includeItems、savePath 和文件编码，基本能绕开九成“保存没反应”。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
