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

Solution 1

From the manual: "In the Output Paths text box, specify the files where the transpiler stores its output: the resulting source code, source maps, and dependencies. Based on this settings, PhpStorm detects files generated through transpilation."

Solution 2

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

Solution 3

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  

Solution 4

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

Solution 5

In Phpstorm 7 use

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

Output Paths: $FileParentDir$/path/to/css/dir/$FileNameWithoutExtension$.css

This found.

View more solutions