WebStorm's file watcher to compile SCSS with Dart

Question

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:

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.

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.

Answer 1

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

Answer 2

You don't actually need to download a separate Dart SDK, as the Sass installer provides one.

It seems like you already followed the installation instructions and probably now have Sass for Windows installed in c:\\tools\\dart-sass , so you now have a file called c:\\tools\\dart-sass\\sass.bat

This is what you should add to WebStorm in the Tool to run on changes | Program Tool to run on changes | Program field (replacing the c:\\tools\\ruby....bat line).

Answer 3

添加正确答案，删除Argument字段中的--no-cache对我--no-cache 。

Answer 4

Adding to the correct answer: For those who are mac users and haven't already figure it out, this is what worked for me:

1. Install dart sass instructions here (NOTE: you might want to uninstall ruby sass first: sudo gem uninstall ruby )
2. Verify dart sass is working correctly: sass path_to_file/your_sass_file.scss path_to_file/your_output_file.css
3. In the Webstorm file watcher options set "Program" reference to: usr/local/bin/sass (this is where sass was installed by default for me)
4. For "Arguments" you can use: $FileName$ $FileNameWithoutExtension$.css (The --update argument also works but the --cache argument is not accepted by dart sass)