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

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

Answer 2

Phpstorm 8.0.3 Windows 7(x64) node-sass installed globally working example

Another key problem from the original post besides point to .cmd is replacing : with forward slash, node doesn't understand the colon syntax and expects a forward slash instead for the Arguments box. Found answer from below link

http://www.wonderlandlabs.com/blog/scss_in_webstorm

Note in the above example for windows you need to point to the cmd file ie "path to global npm packages/node-sass.cmd"

Also he has the switches for ruby sass such as --no-cache which won't work with node as lena pointed out, the node-sass switches should work fine, but haven't tested

Here is a working config

Answer 3

I installed node-sass through npm (npm install node-sass) to actually transcript scss to css. The only problem with the config, as in the question, was the location of the node-sass.cmd file. When installing through npm, you should install the .cmd file inside the node_modules\.bin folder.

In my case, from where the node-sass file was (node_modules\node-sass\bin\node-sass) to (node_modules\.bin\node-sass.cmd).

Also, as per Lena's answer, the output argument should be:

Arguments: $FileName$ -o $ProjectFileDir$/css/$FileNameWithoutExtension$.css

Answer 4

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

Answer 5

The answers here were very helpful and very close to what I needed. I wanted the app to create the map files and bundle them with the css files. Here are the settings that worked for me. I hope this helps someone else!

• Show console: [Error]
• [x] Immediate file synchronization
• [x] Track only root files
• [ ] Trigger watcher regardless of syntax errors
• File type: Sass
• Scope: Project Files
• Program: /usr/local/bin/node-sass
• Arguments: --source-map true --indented-syntax --output-style compressed $FileName$ $FileNameWithoutExtension$.css
• Working directory: $FileDir$
• Environment Variables:
• Output paths to refresh: $FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map
• [ ] Create Output file from stdout

Answer 6

PHP storm version 2018.02

I was not able to make the filewatcher generate a css.map file with the post of Günay, all the rest of the post works fine for me, so what I use:

Installation

Install node-sass global: npm install -g node-sass

Settings:

1. Program C:\Users\User\AppData\Roaming\npm\node-sass.cmd

2. Arguments --source-map true $FileName$ $FileNameWithoutExtension$.css

3. Output path to refresh $FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map

4. Working directory $FileDir$

Hope this helps