File Watcher 编译 Sass 失败主因是 Dart Sass 未正确安装或环境配置异常；需确保终端可运行 sass --version，使用全局安装的 sass（非 ruby-sass），并正确配置 Program、Arguments（如 --style=expanded $FileName$:$FileNameWithoutExtension$.css）、Working directory 为 $ProjectFileDir$ 及 Output paths 为 $FileNameWithoutExtension$.css。
File Watcher 编译 Sass 失败：常见报错和前置条件
根本原因往往不是配置错了，而是 sass 命令压根没装对、没进 path，或者用了不兼容的版本。phpstorm 的 file watcher 只是调用命令行工具，它自己不带编译器。
- 检查终端里能否直接运行
sass --version—— 如果报command not found，说明 Node.js 环境或sass包没装好 - 别用
ruby-sass（已废弃），必须用 Dart Sass：npm install -g sass - Windows 用户注意：如果用 Git Bash 或 WSL，PHPStorm 默认可能调用的是 Windows CMD，得在 File Watcher 的
Working directory和Program路径里写全绝对路径，比如C:\Users\XXX\AppData\Roaming\npm\sass.cmd - macOS / Linux 用户若用
nvm，确保 PHPStorm 启动方式能继承 shell 的环境变量（推荐从终端用open -a PhpStorm启动）
File Watcher 配置 Sass 编译的关键参数
PHPStorm 不会自动猜你要怎么编译，每个字段都得对上实际需求，尤其输入输出路径和参数顺序。
-
Program：填sass（全局可执行）或完整路径，如/usr/local/bin/sass -
Arguments：推荐用--style=expanded --no-source-map $FileName$:$FileNameWithoutExtension$.css；如果要 source map，加--source-map，但别写成--source-map=true（Dart Sass 不认） -
Working directory：设为$ProjectFileDir$，否则相对路径容易错乱 -
Output paths to refresh：填$FileNameWithoutExtension$.css（不是**/*.css），否则修改一个_partial.scss时可能触发无关文件刷新 - 勾选
Auto-save edited files to trigger compilation，不然改完保存前不编译
监听 _partial.scss 文件不触发编译？这是设计使然
File Watcher 默认只监听「入口文件」，也就是你手动指定的 main.scss 这类不以下划线开头的文件。_variables.scss 这种 partial 文件被改了，不会自动触发重编译 —— 因为 PHPStorm 不知道谁 import 了它。
- 解决办法一：在
Arguments里显式列出所有可能被 import 的入口，比如main.scss:main.css _theme.scss:_theme.css（不推荐，维护麻烦） - 解决办法二：改用
Watch the project root+ 自定义File type+Scope，但容易误编译 node_modules 里的 scss - 更稳的做法：把
main.scss加进 watcher，然后每次改 partial 后手动Ctrl+S一下main.scss（空改也行），触发 cascade 编译 - 如果真要全自动，建议换
npm run watch或watchexec，PHPStorm 的 File Watcher 本质是单文件事件驱动，不适合复杂依赖追踪
编译后 CSS 没更新到浏览器？别怪 File Watcher
File Watcher 只负责生成 CSS 文件，不负责刷新浏览器、不处理缓存、也不管你用的是 Laravel Mix 还是 Vite。很多“编译了但页面没变”的问题，其实和它无关。
- 检查生成的
.css文件时间戳是否真的更新了（右键 →Reload from Disk） - 浏览器开了 DevTools 且勾了
Disable cache？没开的话 Ctrl+F5 强刷都不行 - HTML 引用的是
main.css，但编译出来的是main.scss.css？看下Arguments里输出名拼对没 - 用 Laravel、Symfony 等框架时，CSS 可能走 asset bundler（如 Mix），此时 File Watcher 编译的文件根本不会被加载 —— 它和框架构建流程是两套系统
File Watcher 是轻量辅助，不是构建系统。想靠它搞定所有前端流程，迟早掉坑里。
立即学习“PHP免费学习笔记（深入）”；
