This Question is Answered

6 Replies Last post: Nov 14, 2013 7:02 PM by John McBade  
David Cameron Newbie 4 posts since
May 12, 2013
Currently Being Moderated

May 12, 2013 7:52 AM

How can I get css files transpiled from scss files saved into a separate directory?

The documentation would have you believe this is a fairly simple process, and since I can't seem to find many others on these forums banging their heads against their desks as I have, perhaps it is in fact very simple and I am simply overlooking something obvious.


I would like to have the .scss files in my scss folder transpiled into .css files in my css folder. Nothing I seem to put into the Output paths field seems to work. The scss folder and the css folder are at the same level. So you'd think that putting in ../css would work if the Working directory is the default, $FileDir$. I've tried using colons instead of slashes (as per the docs), I've tried back slashes and forward slashes, I've tried updating the settings and restarting WebStorm. I've tried a good number of different approaches in an attempt to get this to work because it would be so frickin' lovely.


The documentation would have me use the browse button to select my target directory, but there is no browse button.


If anyone has any insight into this problem, or requires further clarification about how I'm going about this, please let me know.


Any help is always appreciated.





Elena Pogorelova Expert 1,866 posts since
Oct 5, 2011



in order to change the output directory, you need to modify the Arguments files to tell the SCSS transpiler where to put the generated files; the Output Paths field just tells the IDE where to look for generated files

What does your watcher configuration look like? Please, attach a screenshot

Also, what is your project structure? Would you like the generated css files being placed in <project root>/css folder, or to ../css/ folder related to the directory where your scss files are located?


Best regards,


Andriy Bazanov Master 5,108 posts since
May 28, 2010
I can't help but wonder whether there isn't a better way to do this though. If you have any thoughts on that I'd be glad to learn of them.

There is nothing wrong with this working solution -- I'm using the same approach (although for different kind of watchers). I think "don't touch what ain't broken" fits well here.


But if you want it... you can try replacing ".." by $FileParentDir$ macro (parent folder of the file folder), so it will be something like --no-cache --update $FileName$:$FileParentDir$\css\$FileNameWithoutExtension$.css (I have not tried it on SCSS since I do not use it)

Elena Pogorelova Expert 1,866 posts since
Oct 5, 2011

Yes, $FileParentDir$ macro will do the thing. I'd also suggest modifying the Output paths option accordingly to make the syncronization work:


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

Working directory: $FileDir$

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


See my answer at



Best regards,


John McBade Newbie 47 posts since
Mar 31, 2012

Remember: if you are on a "nix" OS (Linux, Unix(MAC)) system, the fields will look like this (note forward slashes!):


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

Working directory: $FileDir$

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


It's helpful to verify the paths using the setting: "Show Console" drop down set to "Always"


Sure feel like this could be simpler somehow *grin*



More Like This

  • Retrieving data ...