3

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.

LazyOne
  • 158,824
  • 45
  • 388
  • 391
Maksim Dimitrov
  • 113
  • 2
  • 11
  • https://pub.dartlang.org/packages/sass_builder works well for me for Dart projects. It is run as build step though. – Günter Zöchbauer May 10 '18 at 13:27
  • @GünterZöchbauer Forgot to mention, I'm doing a Node project and I just wanted to locally compile my SCSS – Maksim Dimitrov May 10 '18 at 13:59
  • 1
    1) Run `where sass` to find out what program will run when you execute `sass` in terminal. Use that program in File Watcher. 2) If `dart.exe` is not found -- ensure that path to that program is listed in `PATH` system environment variable – LazyOne May 10 '18 at 17:00
  • @LazyOne That made it work. The where sass command showed me it's in _C:\ProgramData\chocolatey\lib\sass\tools_, so i've selected that in the FileWatcher. Added it in the Win10 _PATH_ var and one difference in the FileWatchers arguments was that it expected $FileName$ $FileNameWithoutExtension$.css with no ":" between them, unlike Ruby. Thanks! – Maksim Dimitrov May 10 '18 at 22:05

4 Answers4

5

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

Maksim Dimitrov
  • 113
  • 2
  • 11
  • Sadly doesnt work anymore: `Error reading lstheme.scss: Cannot open file.`. Process finished with exit code 66. – koseduhemak Oct 12 '18 at 08:20
  • This works as intended but I didnt use the sass.bat or the set the environment variable. The only thing I had to point at is the sass.exe – E Alexis MT Dec 27 '19 at 01:54
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 field (replacing the c:\tools\ruby....bat line).

Richard Heap
  • 48,344
  • 9
  • 130
  • 112
  • I have found that sass.bat in _C:\ProgramData\chocolatey\lib\sass\tools_ , which I've set in the File Watcher settings. It now returns: _cmd.exe /D /C call C:\tools\dart-sdk\bin\sass.bat --no-cache --update viewQuestions.scss:viewQuestions.css 'dart.exe' is not recognized as an internal or external command, operable program or batch file. Process finished with exit code 1_ I've also tried naively moving it in Dart's folder, but with no success – Maksim Dimitrov May 10 '18 at 16:16
  • Try installing Sass again, using the `Install Anywhere (Standalone)` method. Download `dart-sass-1.3.2-windows-x64.zip` from the link provided. Unzip it and extract it to `c:\tools`. Check that it works by typing `c:\tools\dart-sass\sass.bat --version`. If that prints `1.3.2` proceed as above. – Richard Heap May 10 '18 at 18:49
  • Also, where do you get the `--no-cache` and `--update` options? Neither seems to exist. – Richard Heap May 10 '18 at 18:59
  • The --no-cache and --update were the default arguments when opening Webstorm's FileWatche for SCSSr. Buut Win10 _PATH_ var solved the problem, thank you for the hasty response nevertheless! – Maksim Dimitrov May 10 '18 at 22:08
1

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)
SwF-K
  • 31
  • 2
0

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

Eric Aya
  • 69,473
  • 35
  • 181
  • 253
Amir Farhan
  • 82
  • 1
  • 8