JetBrains Rider中SCSS File Watcher配置load-path失效求助

以下是针对该问题的具体排查和解决步骤：

• 修正File Watcher工作目录
  Rider默认的工作目录可能不是项目根目录（即包含node_modules的目录），导致--load-path无法正确定位到Foundation的SCSS文件。打开File Watcher配置面板，将Working directory设置为$ProjectFileDir$（Rider内置宏，指向项目根目录）。

• 调整Arguments参数的路径写法
  确保--load-path使用项目根目录的绝对路径（通过Rider宏实现），避免相对路径的歧义。完整的Arguments配置应为：

  --load-path=$ProjectFileDir$/node_modules/foundation-sites/scss $FileName$:$FileNameWithoutExtension$.css
  

  同时将Output paths to refresh设置为$FileNameWithoutExtension$.css，确保Rider能识别生成的CSS文件。

• 指定本地Sass执行文件
  若系统全局安装的Sass与项目本地依赖的版本不一致，可能导致参数兼容性问题。在File Watcher的Program选项中，指定项目本地的Sass路径：

  • Windows系统：$ProjectFileDir$/node_modules/.bin/sass.cmd
  • macOS/Linux系统：$ProjectFileDir$/node_modules/.bin/sass

• 验证@import语句的正确性
  确保main.scss中的导入语句为@import 'foundation';，因为foundation-sites/scss目录下的入口文件正是foundation.scss，无需额外拼接路径。

完成上述配置后，重启File Watcher或重新触发SCSS文件修改，即可正常编译包含Foundation的样式文件。

内容的提问来源于stack exchange，提问作者InversionDK