WebStorm 依赖本地 sass 或 lessc 命令行工具实现 Sass/Less 编译，需全局安装 Dart Sass（npm install -g sass）和 less（npm install -g less），配置 File Watcher 时正确设置 Program、Arguments（含 --source-map、--no-js、--load-path 等）、Watch patterns（含 _*.scss）、Output paths to refresh（如 $FileNameWithoutExtension$.css;$FileNameWithoutExtension$.css.map）及勾选 Auto-save edited files to trigger watcher。
WebStorm 本身不编译 Sass 或 Less，它只调用你本地装好的 sass 或 lessc 命令行工具；没装对、路径错、参数漏，保存文件后就什么都不会发生。
确认本地已安装正确的编译器
WebStorm 的 File Watcher 是“壳”，真正干活的是你终端里能跑起来的命令。别信“装了插件就自动好使”这种说法。
-
sass --version必须能输出类似1.77.2的版本号——推荐全局安装 Dart Sass：npm install -g sass；node-sass已废弃，不支持@use，且常报Cannot find module 'node-sass' -
lessc --version要有输出——装less包：npm install -g less；Less v4.0+ 必须加--no-js参数，否则静默失败，错误提示是JS evaluation disabled - macOS/Linux 用户若终端能运行但 WebStorm 报
No such file or directory，大概率是 WebStorm 没读到你的 shell PATH；需在 WebStorm 启动脚本里补export PATH="/opt/homebrew/bin:$PATH"（Homebrew 路径依实际调整）
File Watcher 的 Arguments 必须带 source map 和 load-path
只生成 .css 文件不够——没有 source map，Chrome DevTools 里点样式根本跳不回 main.scss；没有 --load-path，@use "bootstrap" 这类导入直接报错。
- Sass/SCSS 的 Arguments 示例：
$FileName$ $FileDir$/$FileNameWithoutExtension$.css --source-map --no-cache --load-path=$ProjectFileDir$/node_modules注意：--source-map（不是--sourcemap），$FileDir$表示和源文件同级目录，$ProjectFileDir$才是项目根目录 - Less 的 Arguments 示例：
$FileName$ $FileDir$/$FileNameWithoutExtension$.css --source-map --no-js注意：--no-js对 v4.2+ 是硬性要求，漏掉就编译中断，且无明显错误提示 - 如果用了
_partial.scss这类下划线前缀文件，Watch patterns 必须手动改成**/*.scss;**/_*.scss，默认不监听_开头文件
Output paths to refresh 容易被忽略但极其关键
这个字段不是“可填可不填”的选填项。它控制 WebStorm 编译后刷新哪些文件的编辑器标签——填错或漏填，.map 文件不会更新，DevTools 加载的还是旧映射，断点失效、样式定位错乱。
立即学习“前端免费学习笔记（深入）”；
- 对应 Sass 的配置应为：
$FileNameWithoutExtension$.css;$FileNameWithoutExtension$.css.map如果 CSS 输出到了css/子目录，就得写成：css/$FileNameWithoutExtension$.css;css/$FileNameWithoutExtension$.css.map - Less 同理，但注意它的 .map 文件名默认是
.css.map，不是.css.map以外的变体；若用--source-map-map-inline就不用单独刷新 .map 文件，但调试体验略差 - 勾选 Auto-save edited files to trigger watcher ——WebStorm 默认关着它，这是 70% 以上“配置完仍不编译”的根源
最常被绕开的细节：source map 路径指向、--no-js 强制启用、_*.scss 监听缺失、Output paths 漏掉 .map——这些不显眼的点卡住时，WebStorm 不报红错，只在底部 Event Log 闪一下就消失，得手动打开看。
