WebStorm依赖本地Dart Sass编译Sass，需全局安装sass、正确配置File Watcher的Program（如sass）、Arguments（含--load-path）、Watch patterns（如/.scss;/_.scss）及Output paths to refresh（如$FileNameWithoutExtension$.css;$FileNameWithoutExtension$.css.map）。
WebStorm 本身不编译 Sass，它只调用你本地装好的 sass 命令行工具；没装对、路径错、参数漏，保存文件后就什么都不会发生。
确认本地已安装 Dart Sass（不是 node-sass）
WebStorm 的 File Watcher 是个“壳”，真正干活的是终端里能跑起来的 sass 命令。别信插件自动搞定——Ruby Sass 已废弃，node-sass 不支持 @use 且常报 Cannot find module 'node-sass'。
- 执行
npm install -g sass（推荐 Dart Sass，官方维护，支持最新语法） - 终端运行
sass --version，输出类似1.77.2才算成功 - macOS/Linux 用户若终端能跑、WebStorm 报
No such file or directory，大概率是 WebStorm 没读到 shell 的PATH；需在 WebStorm 启动脚本里补export PATH="/opt/homebrew/bin:$PATH"（Homebrew 路径依实际调整）
File Watcher 的 Program 和 Arguments 必须填对
Program 字段不是选“SCSS”就完事，它必须指向真实可执行的 sass 命令；Arguments 漏掉关键参数会导致无 .map 文件、@use 导入失败、或静默编译中断。
-
Program：填sass（全局安装时），或./node_modules/.bin/sass（项目局部安装时） -
Arguments：推荐--style=expanded --no-source-map --load-path=$ProjectFileDir$/node_modules $FileName$ $FileDir$/$FileNameWithoutExtension$.css - 务必加
--load-path，否则@use "bootstrap"这类导入直接报错 - 要调试源码？把
--no-source-map换成--source-map，并确保Output paths to refresh包含$FileNameWithoutExtension$.css.map
Watch patterns 必须包含下划线开头的文件
默认监听模式是 *.scss，这意味着 _partial.scss 这类局部文件修改后根本不会触发编译——这是最常被忽略的配置项。
- 把
Watch patterns改成**/*.scss;**/_*.scss - 别用
**/*这种模糊写法，WebStorm 可能误匹配非 SCSS 文件 - 如果项目用了
@forward "_mixins"，而_mixins.scss不在监听范围，编译会卡在找不到模块
Output paths to refresh 不填等于白配
这个字段控制 WebStorm 编辑器是否刷新生成的 CSS 和 .map 文件。漏填或路径写错，你在 Chrome DevTools 里点样式永远跳不回原始 .scss 文件。
- 填
$FileNameWithoutExtension$.css;$FileNameWithoutExtension$.css.map（带分号分隔） - 如果输出目录是
css/子目录，对应改成css/$FileNameWithoutExtension$.css;css/$FileNameWithoutExtension$.css.map - 必须勾选
Auto-save edited files to trigger watcher和Trigger watcher on external changes，否则改了文件不反应
最容易被忽略的其实是 Watch patterns 和 Output paths to refresh ——它们不报错、不弹窗，只是默默让编译“看起来没发生”。WebStorm 底部 Event Log 或 Run 窗口偶尔闪一下错误，一晃就没了，得主动去看。
