90%自动编译失败源于sass命令不可用;需在vscode终端执行sass --version验证,若报错则npm install -g sass并重启vscode,再配置.vscode/settings.json中formats、includeitems及utf-8编码。

sass命令不可用,是90%自动编译失败的真正原因——插件没坏,只是根本没启动。
确认 sass 命令能否在 VSCode 终端中运行
Live Sass Compiler 插件多数行为(尤其是 includeItems、@use 解析、watch 重试)会 fallback 到系统级 sass CLI;它不报错,只静默跳过。
- 打开 VSCode 内置终端(
Ctrl + `),执行sass --version - 若提示
command not found或'sass' is not recognized,说明未安装或 PATH 未生效 - 必须执行
npm install -g sass(别用已废弃的node-sass) - macOS/Linux 用户用
pnpm全局安装后,需手动把$HOME/.local/share/pnpm加进$PATH - Windows 用户装完后必须重启 VSCode,否则终端读不到
%APPDATA%\npm
liveSassCompile.settings.formats 配置必须写对路径
默认配置把 .css 输出到同级目录,但实际项目结构往往需要统一输出到 /css/ 或 /dist/css/,写错就找不到文件。
- 在项目根目录建
.vscode/settings.json,不要放在用户全局设置里 -
"savePath"是相对项目根目录的路径,不是相对当前.scss文件,例如"/css/"表示项目根下的css/文件夹 - 不要同时写
liveSassCompile.settings.savePath和formats,前者会覆盖后者里的savePath - 示例有效配置:
"liveSassCompile.settings.formats": [{"format": "expanded", "extensionName": ".css", "savePath": "/css/"}]
下划线开头的文件(如 _mixins.scss)默认不编译
这是 Sass 语言规范,不是插件 bug。插件严格遵循该规则,且不提示、不报错,直接跳过。
- 要让
_mixins.scss参与编译,必须显式加入includeItems - 配置项写法:
"liveSassCompile.settings.includeItems": ["**/_mixins.scss", "**/_variables.scss"] - 通配符
**/表示任意层级,不能漏掉 - 如果用了多文件夹工作区,插件只监听第一个打开的文件夹,右下角状态栏必须显示你期望的项目根路径
UTF-8 with BOM 编码会让插件解析失败
VSCode 右下角显示 “UTF-8 with BOM” 时,插件读取文件头遇到非法字节,会直接中断处理,不报错也不生成 CSS。
- 打开任意
.scss文件,点击右下角编码标识 - 选择
Save with Encoding → UTF-8(注意不是带 “with BOM” 的那个) - 保存后关闭再重新打开文件,再试一次保存
- 如果项目由其他编辑器导入(如 Sublime、Dreamweaver),BOM 出现概率极高,务必逐个检查
最易被忽略的是:插件和你手动在终端运行的 sass --watch 进程会同时写同一个 .css 文件——尤其 Windows 下容易写空、内容错乱、甚至文件锁死。两者别共存。











