Sass filewatcher for webstorm

  1. You need to specify a full path to node-sass.cmd in a Program field (as @LazyOne mentioned)
  2. Specified arguments won't work with node-sass - they are only suitable for standard SASS compiler. Here is a list of node-sass options:
Usage: node C:\Users\USER\AppData\Roaming\npm\node_modules\node-sass\bin\node-sass

[options] <input.scss> [<output.css>]

Options:
  --output-style     CSS output style (nested|expanded|compact|compressed)  [default: "nested"]
  --source-comments  Include debug info in output (none|normal|map)         [default: "none"]
  --include-path     Path to look for @import-ed files                      [default: "C:\\Users\\USER\\AppData\\Roaming\\npm"]
  --watch, -w        Watch a directory or file
  --output, -o       Output css file
  --stdout           Print the resulting CSS to stdout
  --help, --help     Print usage info

the simplest setup looks as follows:

Program: C:\Users\USER\AppData\Roaming\npm\node-sass.cmd
Arguments: $FileName$ $FileNameWithoutExtension$.css
Working directory: $FileDir$
Output paths to refresh: $FileNameWithoutExtension$.css

'Create output from stdout' should be off

With such settings the generated .css file will be placed near the original .scss. If you like to put resultant files into a different folder, try playing with -o option. Like:

Arguments: $FileName$ -o $ProjectFileDir$/css/$FileNameWithoutExtension$.css
Output paths to refresh: $ProjectFileDir$/css/$FileNameWithoutExtension$.css

Most definitely path to .cmd is wrong as lena and lazy one suggested. Whenever watcher unchecks in Web/Phpstorm its probably because of invalid path. If you still have trouble with node-sass you could always go Ruby way.

  1. Download and install Ruby for Win,
  2. Install Sass via command prompt with gem install sass,
  3. In Web/Phpstorm put "Program" path to sass.bat (remember node-sass.cmd?), e.g. C:\Ruby200\bin\sass.bat

First you need install nodejs and then use npm install -g node-sass. After that set following things to webstorm scss filewatcher:

  • Program: node-sass.cmd
  • Arguments: $FileName$ $FileNameWithoutExtension$.css
  • Working directory: $FileDir$
  • Output paths for refs: $FileNameWithoutExtension$.css

Tags:

Sass

Node.Js

Webstorm

Recent Posts