WebStorm 的文件观察器用 Dart 编译 SCSS答案

【问题标题】：WebStorm's file watcher to compile SCSS with DartWebStorm 的文件观察器用 Dart 编译 SCSS
【发布时间】：2018-05-10 13:26:09
【问题描述】：

我发现 Sass 正在从使用 Ruby 编译到 Dart，正如他们的主页所暗示的那样 - https://sass-lang.com/。我按照那里的步骤，得到了 Dart 编译器，实际上我可以运行他们建议的命令 - sass source/stylesheets/index.scss build/stylesheets/index.css 并成功地将我的 SCSS 编译为 CSS。

我遇到的问题是当我尝试让 WebStorm 的文件观察器为我执行此步骤时。当我如下图所示配置文件观察器时：

然后在更改我的 SCSS 文件时，文件观察器确实会触发，但会说：

C:\tools\dart-sdk\bin\dart.exe --no-cache --update viewQuestions.scss:viewQuestions.css 无法识别的标志：缓存、更新

进程以退出代码 255 结束

我尝试删除标志，但它会导致更多错误，所以我停止尝试。然后我放弃了使用 Dart 进行此操作的想法，并使用 Ruby 重新配置它，使用相同的参数，如下图所示，效果很好。

所以我的问题是我做错了什么，只是 Dart 需要不同的论点还是我错过了更多的东西。

【问题讨论】：

pub.dartlang.org/packages/sass_builder 非常适合我的 Dart 项目。它作为构建步骤运行。
@GünterZöchbauer 忘了说，我正在做一个 Node 项目，我只是想在本地编译我的 SCSS
1) 运行where sass，查看在终端中执行sass 时会运行什么程序。在 File Watcher 中使用该程序。 2) 如果没有找到dart.exe -- 确保该程序的路径列在PATH 系统环境变量中
@LazyOne 这使它工作。 where sass 命令显示它在 C:\ProgramData\chocolatey\lib\sass\tools 中，所以我在 FileWatcher 中选择了它。在 Win10 PATH 变量中添加了它，FileWatchers 参数的一个区别是它期望 $FileName$ $FileNameWithoutExtension$.css 在它们之间没有“：”，这与 Ruby 不同。谢谢！

标签： ruby sass dart webstorm file-watcher

【解决方案1】：

正如 LazyOne 建议的那样，我已经按照以下步骤找到了问题的解决方案：

1) 运行“where sass”命令，找到sass.bat所在的位置

2) 在 WebStorm 的 File Watchers 的 Program 字段中传递该 sass.bat。它就在这里C:\ProgramData\chocolatey\lib\sass\tools\sass.bat

3) 然后我跟着https://www.java.com/en/download/help/path.xml，将Dart bin文件夹从C:\tools\dart-sdk\bin添加到Win10PATH系统环境变量 p>

4) 最后，稍微调整一下，发现在 File Watcher 的 Argument 字段中，该行应该是 $FileName$ $FileNameWithoutExtension$.css 中间没有“:”，这与 Ruby 不同

这最终对我有用

【讨论】：

遗憾的是不再起作用：Error reading lstheme.scss: Cannot open file.。进程以退出代码 66 结束。
这按预期工作，但我没有使用 sass.bat 或设置环境变量。我唯一需要指出的是 sass.exe

【解决方案2】：

添加到正确答案：对于那些是 mac 用户并且还没有弄清楚的人，这对我有用：

安装 dart sass instructions here（注意：您可能需要先卸载 ruby sass：sudo gem uninstall ruby）
验证 dart sass 是否正常工作：sass path_to_file/your_sass_file.scss path_to_file/your_output_file.css
在 Webstorm 文件观察程序选项中，将“程序”引用设置为：usr/local/bin/sass（这是我默认安装 sass 的位置）
对于“参数”，您可以使用：$FileName$ $FileNameWithoutExtension$.css（--update 参数也有效，但 dart sass 不接受 --cache argument）

【讨论】：

【解决方案3】：

您实际上不需要下载单独的 Dart SDK，因为 Sass 安装程序提供了一个。

您似乎已经关注了installation instructions，并且现在可能在c:\tools\dart-sass 中安装了适用于Windows 的Sass，所以您现在有了一个名为c:\tools\dart-sass\sass.bat 的文件

这是您应该在 Tool to run on changes | Program 字段中添加到 WebStorm 的内容（替换 c:\tools\ruby....bat 行）。

【讨论】：

我在 C:\ProgramData\chocolatey\lib\sass\tools 中找到了 sass.bat，这是我在 File Watcher 设置中设置的。它现在返回： cmd.exe /D /C call C:\tools\dart-sdk\bin\sass.bat --no-cache --update viewQuestions.scss:viewQuestions.css 'dart.exe' is不被识别为内部或外部命令、可运行程序或批处理文件。进程以退出代码 1 结束我也尝试天真地将其移动到 Dart 的文件夹中，但没有成功
尝试再次安装 Sass，使用 Install Anywhere (Standalone) 方法。从提供的链接下载dart-sass-1.3.2-windows-x64.zip。解压并解压到c:\tools。通过键入c:\tools\dart-sass\sass.bat --version 检查它是否有效。如果打印出1.3.2，请按上述方式进行。
另外，您从哪里获得--no-cache 和--update 选项？两者似乎都不存在。
--no-cache 和 --update 是为 SCSSr 打开 Webstorm 的 FileWatche 时的默认参数。但是Win10 PATH var 解决了这个问题，不过还是谢谢你的仓促回复！

【解决方案4】：

添加到正确答案，删除参数字段中的--no-cache 对我有用。

【讨论】：