升级 WebStorm 2023 后 Sass 编译报错，通常是因为 IDE 内置 Node 环境升级导致旧版 node-sass 不兼容，或 File Watcher 配置被重置。
先说结论：WebStorm 2023 版本对内置 Node 环境和文件监听机制做了调整，导致旧配置失效或依赖不兼容，需手动修正监听器参数并升级 Sass 依赖。
- 先确认：检查 File Watcher 中的参数变量是否被重置
- 先处理：将 node-sass 替换为 sass 或调整内置 Node 版本
- 再验证：修改 SCSS 文件确认 CSS 是否正常生成
典型报错特征
在 Terminal 或 Build Output 中看到类似以下日志，通常意味着 Node 版本与 node-sass 不匹配：
Error: Node Sass does not yet support your current environment: Windows 64-bit with Unsupported runtime (108)
For more information on which environments are supported please see:
https://github.com/sass/node-sass/releases/tag/v4.14.1或者 File Watcher 面板持续显示红色错误提示，但保存文件无 CSS 生成。
解决方案一：迁移 Sass 实现（推荐）
node-sass 已停止维护，建议迁移至 Dart Sass。在项目根目录执行以下命令：
npm uninstall node-sass
npm install sass `--save-dev`修改 package.json 依赖对比示例：
// 修改前
"devDependencies": {
"node-sass": "^4.14.1"
}
// 修改后
"devDependencies": {
"sass": "^1.50.0"
}完成后删除 node_modules 并重新安装依赖：
rm -rf node_modules
npm install解决方案二：修正 File Watcher 配置
打开 Settings > Tools > File Watchers，找到 Sass 配置项。重点检查以下参数字段：
- Arguments: 确保使用相对路径变量，推荐配置为
$FileName$:$FileNameWithoutExtension$.css - Output paths to refresh: 设置为
$FileNameWithoutExtension$.css - Working directory: 确保指向
$FileDir$
如果不确定配置是否正确，可删除该 Watcher 后重新添加 WebStorm 默认的 Sass 模板。
解决方案三：调整 Node 环境（需谨慎）
如果必须保留旧版 node-sass，可在 Settings > Languages & Frameworks > Node.js and NPM 中，将 Node 解释器指向项目本地安装的旧版 Node。
注意：强制指定旧版 Node 解释器可能导致依赖新 Node 版本的其他插件功能异常，仅作为临时兼容方案。
若遇到配置修改后仍不生效，尝试清除 IDE 缓存：
File > Invalidate Caches... > Invalidate and Restart
验证方法
修改任意一个 .scss 文件并保存，观察底部状态栏是否有 File Watcher 运行提示。检查输出目录是否生成了对应的 .css 文件，并查看 WebStorm 底部的 Build Output 或 Terminal 窗口是否有报错日志。若文件生成且无红色报错，即表示恢复。
常见坑
- 路径变量混淆：
$FilePath$和$FileName$在不同系统下表现可能不同，建议优先用相对路径变量。 - 缓存干扰：IDE 升级后旧缓存可能干扰新配置，遇到诡异报错先尝试 Invalidate Caches。
- 全局与本地冲突：确保 File Watcher 调用的 sass 命令是项目本地的
node_modules/.bin/sass，而不是全局安装的版本，避免版本不一致。