Search code examples
rubysassdartwebstormfile-watcher

WebStorm's file watcher to compile SCSS with Dart

I found out that Sass is moving from being compiled with Ruby to Dart, as their main page suggests - https://sass-lang.com/. I followed the steps there, got myself the Dart compiler and indeed I can run the command they suggest - sass source/stylesheets/index.scss build/stylesheets/index.css and successfully compile my SCSS to CSS.

The problem I'm having is when I try making WebStorm's File Watcher to do this step for me. When I configure the File Watcher as seen in the picture below:

Setup File Watcher with Dart

Then on change of my SCSS files the file watcher indeed triggers, but says:

C:\tools\dart-sdk\bin\dart.exe --no-cache --update viewQuestions.scss:viewQuestions.css Unrecognized flags: cache, update

Process finished with exit code 255

I tried removing the flags, but it lead to more errors, so I stopped trying. I then dropped the idea of doing it with Dart and re-configured it back with Ruby, with the same arguments, as seen in the picture below, which worked perfectly.

Setup File Watcher with Ruby

So my question would be what am I doing wrong, is it just Dart that needs different arguments or am I missing something more than that.

Solution

  • As LazyOne suggested, I've found the solution to the problem by following the steps:

    1) Running the "where sass" command, finding where the sass.bat is located

    2) Passing that sass.bat in the Program field of WebStorm's File Watchers. It was here C:\ProgramData\chocolatey\lib\sass\tools\sass.bat

    3) Then I followed https://www.java.com/en/download/help/path.xml and added the Dart bin folder from C:\tools\dart-sdk\bin to Win10 PATH system environment variable

    4) Finally, with a bit of tweaking found that in the File Watcher's Argument field the line should be $FileName$ $FileNameWithoutExtension$.css with no ":" in between, unlike for Ruby

    This worked for me in the end SCSS compiles successfully