CODEWITHSUNDEEP
rubysassdartwebstormfile-watcher
Maksim Dimitrov
Maksim Dimitrov

Reputation: 183

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.

Upvotes: 3

Views: 3665

Answers (4)

SwF-K
SwF-K

Reputation: 31

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)

Upvotes: 1

Maksim Dimitrov
Maksim Dimitrov

Reputation: 183

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

Upvotes: 5

Amir Farhan
Amir Farhan

Reputation: 92

Adding to correct answer, removing --no-cache in Argument field works for me.

Upvotes: 0

Richard Heap
Richard Heap

Reputation: 51682

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 field (replacing the c:\tools\ruby....bat line).

Upvotes: 2

Related Questions