How do I correctly setup the scss file watcher in PhpStorm?

Question

I have it working, but with these settings it takes quite a while until the change comes through in PhpStorm. If I get rid of the ../css/ part of the argument string then it creates/updates the css file in the same directory as the scss file is in, but does it immediately. What am I doing wrong?

I'm using PhpStorm 6.0.1 on OS X 10.8.3

Answer 1

as it's mentioned in the previous answer, you have to set up the Output paths option accordingly. Like:

Arguments: --no-cache --update $FileName$:$FileParentDir$/css/$FileNameWithoutExtension$.css

Working directory: $FileDir$

Output Paths: $FileParentDir$/css/$FileNameWithoutExtension$.css

Now output paths matches the scss output directory, so that the IDE knows where to look for output and what it looks like

Answer 2

I recommend using node-sass it's 10+ times faster

 npm install -g node-sass

Program :

/usr/local/bin/node-sass

Arguments :

$FileName$ $FileNameWithoutExtension$.css

Output Paths :

$FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map

Edit :

If you want the css file compressed, use that for the Arguments :

--output-style compressed $FileName$ $FileNameWithoutExtension$.css  

Answer 3

For anyone uses node-sass in Windows Env, here you go,

Program:

Windows

C:\Users\%username%\AppData\Roaming\npm\node-sass.cmd

Linux

/usr/local/bin/node-sass

Arguments (Windows):

$FileName$ $ProjectFileDir$\dist\$FileNameWithoutExtension$.css

Output paths for refresh(windows):

$ProjectFileDir$\dist\$FileNameWithoutExtension$.css