WebStorm文件监视器配置Dart编译SCSS报错，求解决方案

你这明显是踩了WebStorm配置Dart Sass的常见坑——File Watcher里选错了执行程序，还混用了Ruby Sass的专属参数，我来一步步帮你理顺：

问题根源拆解 #

1. 你手动编译用的是dart-sdk/bin下的sass命令（这才是Dart Sass的正确入口），但WebStorm里却调用了dart.exe，这俩完全是不同程序，dart.exe根本不认识--no-cache、--update这些参数，直接抛出"Unrecognized flags"太正常了。
2. 退一步说，--no-cache、--update是Ruby Sass独有的参数，Dart Sass本身就不支持这些，哪怕你换对了程序，用这些参数照样报错。

正确配置步骤 #

1. 找到Dart Sass的专属执行文件 #

• 如果你是通过Dart SDK安装的Sass，Windows下路径一般是C:\tools\dart-sdk\bin\sass.bat；
• 如果你是单独下载的Dart Sass独立包，路径就是你解压后的sass.exe所在位置。

2. 修正WebStorm File Watcher核心配置 #

打开File Watcher配置界面，修改以下关键字段：

• Program：把原来的C:\tools\dart-sdk\bin\dart.exe替换成上面找到的sass.bat/sass.exe的完整路径；
• Arguments：删掉所有Ruby Sass参数，换成符合Dart Sass语法的写法，用WebStorm变量对应源文件和输出文件即可：
  如果你要在当前目录输出同名CSS，就写：

  $FileName$ $FileNameWithoutExtension$.css
  

  要是和你手动执行的逻辑一致（输出到build/stylesheets目录），就写成：

  $FileDirRelativeToProjectRoot$/$FileName$ build/stylesheets/$FileNameWithoutExtension$.css
  

• Output paths to refresh：设置成你的CSS输出路径，比如$ProjectFileDir$/build/stylesheets/$FileNameWithoutExtension$.css，确保WebStorm能自动识别编译后的文件。

3. 验证配置 #

保存配置后，修改你的viewQuestions.scss文件触发File Watcher，应该就能正常编译出CSS，不会再出现参数错误提示了。

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