WebStorm 找不到 sass 或 lessc 是因未同步 shell PATH，非插件问题；macOS/Linux 需在启动脚本加 export PATH，Windows 应检查 %APPDATA%\npm 或用绝对路径；Program 填 sass 或项目内路径，Arguments 必含 --source-map 和 --load-path（Sass）或 --no-js（Less），Watch patterns 需包含 /_.scss 和 /_.less，Output paths to refresh 必须严格匹配输出路径并同时声明 .css 和 .css.map 文件。
WebStorm 找不到 sass 或 lessc 命令
不是插件没装好，而是 WebStorm 没读到你的 shell 环境 PATH。终端里能跑 sass --version，不代表 WebStorm 能调用它。
- macOS/Linux 用户：WebStorm 启动时默认不加载 shell 配置（如
~/.zshrc），需在 WebStorm 启动脚本（如/Applications/PhpStorm.app/Contents/bin/phpstorm.sh）开头加一行：export PATH="/opt/homebrew/bin:$PATH"（Homebrew 路径按实际调整，比如/usr/local/bin或~/.npm-global/bin） - Windows 用户：检查系统环境变量 PATH 是否包含
%APPDATA%\npm（全局 npm 全局安装路径），或改用绝对路径填入 File Watcher 的Program字段，例如：C:\Users\YourName\AppData\Roaming\npm\sass.cmd - 验证方式：在 WebStorm 内置 Terminal 中运行
which sass（macOS/Linux）或where sass（Windows），输出应与你期望的路径一致
Program 和 Arguments 怎么填才不静默失败
填错一个参数，保存文件后就什么都不会发生，且 WebStorm 很少弹错误提示——只在底部 Event Log 闪一下，容易忽略。
-
Program字段填：sass（全局安装）或$ProjectFileDir$/node_modules/.bin/sass（项目级安装）；./node_modules/.bin/sass会失败，因为 WebStorm 不解析当前目录的. - Sass 的
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是 Less v4.2+ 硬性要求，漏掉就编译中断，且无报错信息 - 千万别加
-w或--watch：WebStorm 自己监听文件变化，重复启用会导致进程卡死或编译延迟
改了 _mixins.scss 但 CSS 没更新
这是最常见却最难察觉的问题：WebStorm 默认的 Watch patterns 只匹配 *.scss，根本不看下划线开头的文件，而 @use 或 @import 的依赖项恰恰都是 _*.scss。
- 把
Watch patterns改成：**/*.scss;**/_*.scss（Sass）或**/*.less;**/_*.less（Less）；分号分隔，不能用空格或逗号 - 如果用了嵌套结构（如
src/styles/base/_variables.scss），**/确保递归匹配所有层级 - Less 还需额外关掉
Track only root files并勾选Trigger on external changes，否则@import的子文件修改完全不触发编译
Output paths to refresh 填错就调试不了源码
这个字段不是可选项，而是 source map 生效的前提。不填或只填 .css，Chrome DevTools 里点样式会跳到空白 CSS 行，而不是原始 main.scss。
立即学习“前端免费学习笔记（深入）”；
- 必须同时声明 CSS 和 map 文件：
$FileNameWithoutExtension$.css;$FileNameWithoutExtension$.css.map - 路径要和
Arguments中的输出路径严格一致；比如Arguments里写的是$FileDir$/css/$FileNameWithoutExtension$.css，这里就得填css/$FileNameWithoutExtension$.css;css/$FileNameWithoutExtension$.css.map - 浏览器端也要开启支持：Chrome DevTools → Settings → Preferences → Sources → 勾选 “Enable CSS source maps”
