WebStorm需通过File Watcher调用本地sass CLI实现Sass自动编译；必须全局安装Dart Sass（npm install -g sass），配置Watcher时Program填sass，Arguments加--load-path支持@use，Watch patterns需包含_*.scss否则_partial.scss不触发编译。
WebStorm 本身不编译 Sass 或 Less，它只调用你本地装好的命令行工具（如 sass 或 lessc）来执行编译；没装 CLI、路径填错、或监听范围漏掉下划线文件，都会导致“保存了但没生成 CSS”。
确认本地已安装且可运行的编译器
WebStorm 的 File Watcher 不自带编译能力，必须依赖外部 CLI。选哪个、怎么装，直接影响语法支持和维护成本：
-
sass（Dart Sass）是官方推荐，支持@use、@forward和现代模块系统；运行npm install -g sass，再终端执行sass --version能输出版本号才算成功 -
node-sass已废弃，不支持@use，Node 版本兼容差，常见报错Cannot find module 'node-sass'；除非老项目强依赖，否则别碰 -
lessc需要npm install -g less；若要用压缩插件，额外装less-plugin-clean-css，并在 Arguments 里加--clean-css - macOS/Linux 用户可能遇到 WebStorm 找不到
sass：不是没装，而是 PATH 没同步；可在 WebStorm 启动脚本中补export PATH="/opt/homebrew/bin:$PATH"（路径按实际调整）
File Watcher 的 Program 和 Arguments 怎么填
Program 字段填的是命令名或绝对路径，Arguments 是传给它的参数；填错一个，保存就静默失败：
- Program 填
sass（全局安装时）或$ProjectFileDir$/node_modules/.bin/sass（项目局部安装时）；填./node_modules/.bin/sass会失败，因为 WebStorm 不解析.相对路径 - Arguments 推荐：
--style=expanded --no-source-map --load-path=$ProjectFileDir$/node_modules；其中--load-path是关键，否则@use "bootstrap"这类第三方包导入会报错 - Less 的 Arguments 示例：
--source-map --clean-css；注意lessc默认不生成 sourcemap，必须显式加--source-map - 不要加
-w或--watch：WebStorm 自己负责监听文件变化，重复加会导致冲突或进程卡住
Watch patterns 必须包含下划线开头的文件
默认的 *.scss 或 *.less 不会触发 _partial.scss 或 _variables.less 的修改——而这类文件恰恰是被 @import 或 @use 引入的主入口依赖项：
- 把 Watch patterns 改成：
**/*.scss;**/_*.scss（Sass）或**/*.less;**/_*.less（Less） - 路径通配符用分号分隔，不能用空格或逗号；
**/表示递归任意层级，_*.scss显式匹配下划线前缀 - 如果不改，改了
_mixins.scss后，依赖它的main.scss不会重新编译，CSS 就永远不是最新状态
Output paths to refresh 和自动保存设置容易被忽略
这个字段控制 WebStorm 刷新哪些文件的编辑器视图；填错会导致 CSS 文件已生成，但编辑器里看不到更新，甚至提示“文件已被外部更改”：
- Output paths to refresh 填：
$FileNameWithoutExtension$.css;$FileNameWithoutExtension$.css.map；map 文件也要列出来，否则断点调试时找不到源码位置 - 务必勾选
Auto-save edited files to trigger watcher：否则改完 SCSS 不手动 Ctrl+S，Watcher 根本不启动 - 也建议勾选
Trigger watcher on external changes：比如用 Git checkout 切换分支时，SCSS 文件被覆盖，也能自动重编译 - 如果想把 CSS 输出到
css/子目录，Arguments 里用--update $FileName$:$FileParentDir$/css/$FileNameWithoutExtension$.css，同时 Output paths to refresh 也要同步改成css/$FileNameWithoutExtension$.css
最常被跳过的其实是 Watch patterns 和 PATH 同步；前者导致“改了不生效”，后者导致“根本跑不起来”，问题现象都一样——保存后 Event Log 闪一下错误又消失，没人去看。盯着底部那个小窗口，比反复检查配置更管用。
