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 this project and I can't get the Sass file watcher to work.

enter image description here

Even after I save the filewatcher and click "Ok", the filewatcher does not work. When I open the settings to check what's wrong the filewatcher has been unchecked. Here are the filewatcher settings:

enter image description here

The node-sass module is installed as a global module so the node-sass command works.

Instead of **just** `node-sass` as a program, you should provide **FULL PATH** to `node-sass.cmd` (or whatever correct executable file name that is). You are making typical mistake on Windows platform: When you running `node-sass` in terminal/console, DOS (cmd.exe) *automatically* converts it to `node-sass.cmd`; but when IDE is creating process for with the same params, the Windows API requires EXACT file name -- it does not do such "conversion" for you. — LazyOne, May 19 '14 at 09:38
I installed it using npm. Not sure where to find the path that node-sass in pointing to. — EternallyCurious, May 19 '14 at 10:28
Search for `node-sass` on `C:\ ` drive maybe?? It should be in `C:\Users\USERNAME\AppData\Roaming` folder — LazyOne, May 19 '14 at 11:17
I know the folder is there - there is no cmd file inside it however. — EternallyCurious, May 19 '14 at 11:22
@EternallyCurious, I had the same problem finding the node-sass.cmd. I thought it was node_modules/node-sass/bin folder. It turned out to be in node_modules/.bin folder. — kimbaudi, Jul 13 '16 at 06:01
@РостиславКирчев Thanks, you saved my life! I was pulling my hair on this one... — Rodolphe, Jun 22 '20 at 14:53

lena · Answer 1 · 2014-09-25T14:20:28.813

14

You need to specify a full path to node-sass.cmd in a Program field (as @LazyOne mentioned)
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

edited Sep 25 '14 at 14:20

answered May 20 '14 at 13:08

lena

90,154
11
145
150

+1 for the details but did you actually make it work? can you detail the paramaters in the Watcher dialog plz? I'm about to switch to ruby because this doesn't work – TecHunter Sep 25 '14 at 08:07
Sure:) I've updated the answer accordingly. Do you have any problems setting it up? – lena Sep 25 '14 at 14:21
2

still not working, there is indicator 'Executing SCSS task' and it keep loading for eternity – slier Oct 08 '14 at 10:11
1

same problem here, task never completes. I am using node-sass.cmd instead of sass-cli.cmd. – dan Dec 26 '14 at 15:01
I'd suggest creating a support ticket then – lena Dec 26 '14 at 15:09
its working fine for me now, double check that you replace the colons with a forward slash, as I did not at first try and the task would just continue to run, after replacing with forward slash all is well. – dan Dec 26 '14 at 15:31
1

Works for me. I would have marked this as the correct answer as getting Node SASS to work was the original question. For those having trouble my watcher's `programe` is set to `node` and the arguments are `C:\projects\webstorm-testing\node_modules\node-sass\bin\node-sass $FileName$ $FileNameWithoutExtension$.css` – moefinley Apr 09 '20 at 07:48

score 8 · Accepted Answer · answered May 22 '14 at 12:03

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.

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

score 7 · Answer 3 · answered Dec 04 '15 at 10:34

7

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

answered Dec 04 '15 at 10:34

Antti

1,029
12
15

confirmed in Webstorm 2016.1.1 – KuN Apr 16 '16 at 04:38

slier · Answer 4 · 2014-10-08T12:02:17.843

3

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

enter image description here

edited Oct 08 '14 at 12:02

answered Oct 08 '14 at 11:27

slier

6,511
6
36
55

1

node-sass-cli has been deprecated in favor of node-sass itself. It now support CLI out of the box. – smets.kevin Nov 09 '15 at 21:29

score 3 · Answer 5 · answered Dec 26 '14 at 15:24

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

node-sass filewatcher

enter image description here

score 3 · Answer 6 · answered Nov 09 '15 at 21:37

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

score 3 · Answer 7 · answered Oct 20 '16 at 23:22

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

I used to reject installing a whole different language when all I want is covnerting SCSS to CSS. Thus, this is the perfect answer for me. Using PHPStorm 2017.2 the default created by PHPStorm was quite similar to your approach. Changing arguments to your suggestion was only requirement to get it running. — Thomas Urban, Aug 12 '17 at 09:26

score 1 · Answer 8 · answered May 23 '19 at 07:09

1

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.

answered May 23 '19 at 07:09

Günay Gültekin

4,486
8
33
36

Adding the space helped me. Thanks a bunch! – Jonathan Ma Jan 13 '20 at 16:29

score 1 · Answer 9 · edited Oct 03 '19 at 06:53

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:

Program C:\Users\User\AppData\Roaming\npm\node-sass.cmd
Arguments --source-map true $FileName$ $FileNameWithoutExtension$.css
Output path to refresh $FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map
Working directory $FileDir$

Hope this helps

score 0 · Answer 10 · edited May 23 '16 at 17:32

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

Sass filewatcher for webstorm

10 Answers10

Linked