Sass filewatcher for webstorm

Question

I am trying to use sass in a NodeJS project and this is the library I installed with nodejs

https://www.npmjs.org/package/node-sass

I am using webstorm for t

Answer 1

I know this question has been answered, this is for future visitor,

Phpstorm file watcher does not work very well with node-sass (tested in Phpstorm 8.0.1 windows)

Instead install node-sass-cli and use following setting

Answer 2

I have the same issue. The default configuration by IntelliJ doesn't work.

This one is worked. You can see the different configuration that is marked in yellow.

Answer 3

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

Answer 4

node-sass requires nothing more than $FileName$ $FileNameWithoutExtension$.css Tested and works in WebStorm 11

The program parameter needs the full path to the bin/exe though, even when it's globally available. In my case /usr/local/bin/node-sass, in your case it will be the path to the node-sass.cmd.

node sass cli usage

node-sass [options] <input> [output] cat <input> | node-sass > output

node sass cli parameters

-w, --watch                Watch a directory or file
-r, --recursive            Recursively watch directories or files
-o, --output               Output directory
-x, --omit-source-map-url  Omit source map URL comment from output
-i, --indented-syntax      Treat data from stdin as sass code (versus scss)
-q, --quiet                Suppress log output except on error
-v, --version              Prints version info
--output-style             CSS output style (nested | expanded | compact | compressed)
--indent-type              Indent type for output CSS (space | tab)
--indent-width             Indent width; number of spaces or tabs (maximum value: 10)
--linefeed                 Linefeed style (cr | crlf | lf | lfcr)
--source-comments          Include debug info in output
--source-map               Emit source map
--source-map-contents      Embed include contents in map
--source-map-embed         Embed sourceMappingUrl as data URI
--source-map-root          Base path, will be emitted in source-map as is
--include-path             Path to look for imported files
--follow                   Follow symlinked directories
--precision                The amount of precision allowed in decimal numbers
--importer                 Path to .js file containing custom importer
--functions                Path to .js file containing custom functions
--help                     Print usage info