VSCode本身不编译Sass，所谓“自动编译”本质是调用sass CLI或插件内置引擎；没装Dart Sass或配置错路径，保存后CSS无反应是常态。
VSCode 本身不编译 Sass，所谓“自动编译”本质是调用 sass CLI 或插件内置引擎；没装 Dart Sass 或配置错路径，保存后 CSS 一动不动是常态，不是你操作错了。
确认本地已安装 Dart Sass CLI
Live Sass Compiler 插件虽自带引擎，但多数人遇到“保存无反应”，根源其实是命令行 sass 命令根本不可用——而 VSCode 的 Tasks、终端任务、甚至某些插件行为都依赖它。
- 打开 VSCode 终端（
Ctrl+`），执行sass --version；若报command not found，说明没装或 PATH 没生效 - 执行
npm install -g sass（别用node-sass，它已废弃，不支持@use和模块系统） - macOS/Linux 用户注意：
pnpm或yarn全局安装后，需手动把$HOME/.local/share/pnpm或$HOME/.yarn/bin加进$PATH；Windows 用户重启 VSCode 才能继承 npm 全局 bin 路径
Live Sass Compiler 插件必须改的三项配置
插件装完默认把 .css 输出到和 .scss 同目录，且不生成 .map，也不压缩——这不符合多数项目结构，直接导致 HTML 引不到文件、调试找不到源行。
- 在项目根目录建
.vscode/settings.json，写入liveSassCompile.settings.formats：例如[{"format": "expanded", "extensionName": ".css", "savePath": "/css/"}]，表示所有编译结果存进项目根下的/css/目录 - 设
liveSassCompile.settings.generateMap为true，否则 DevTools 里点不到 SCSS 行号 - 删掉
liveSassCompile.settings.savePath（如果误写了），它会覆盖formats里的savePath，造成路径冲突
保存不触发编译？先盯住这三个细节
状态栏没出现 “Compiling SASS” 提示，控制台也无报错，大概率不是插件崩了，而是被规范或编码卡住了。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
立即学习“前端免费学习笔记（深入）”；
- 文件名以
_开头（如_mixins.scss）默认被跳过——这是 Sass 规范，不是插件 bug；要编译它，得在liveSassCompile.settings.includeItems里显式加路径，比如["**/_mixins.scss"] - 右下角状态栏没显示你期望的工作区文件夹名？多文件夹工作区（Workspace）下，插件只监听第一个文件夹；关掉其他文件夹，只开当前项目根目录
- 右下角编码显示 “UTF-8 with BOM”？立刻点它 →
Save with Encoding→ 选UTF-8；BOM 头会让插件解析失败，静默退出
别让两个 sass --watch 进程打架
如果你一边开着 Live Sass Compiler，一边又在终端跑 sass --watch src/scss/:dist/css/，两个进程可能同时写同一个 .css 文件——尤其 Windows 下容易写空、内容错乱、甚至文件锁死。
- 优先停掉终端里的
sass --watch；插件响应更快，且自动处理保存事件更稳定 - 真要换回 CLI 方式（比如需要
--source-map-urls=relative这类高级参数），就彻底禁用 Live Sass Compiler，再配tasks.json或package.json脚本 - 注意：插件用的是内嵌 Dart Sass，不读你全局装的
sass；CLI 方式才真正走你装的sass版本，升级语法兼容性时这点很关键
最易被忽略的其实是文件命名规范和编码——它们不报错，也不提示，只是默默跳过编译。调试时先看右下角状态栏有没有 “Watch Sass” 按钮，再点开一个 .scss 文件确认编码和路径是否干净，比重装插件快得多。
