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.





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,


Here is a screen grab for the watcher dialog box:

You'll notice that I've simply left everything set to their default values because as near as I can tell these are the values I want anyway. I want my css files to have the same names as their scss counterparts. And I want those generated/transpiled css files to appear in the css directory, which would be ../css in relation to the scss directory.

While I followed your reply (for which I am quite grateful, btw) I'm still not really sure what arguments I should make or where I would put them in order to achieve my desired goal.




@Lena: With your help I believe I have arrived at a working solution. I could see that the "Arguments" field had a macro that took the .scss file and transpiled it to a css copy with a .css extension, but it never occurred to me that I might be able to put information about where I wanted the transpiled file to reside. So now, instead of the default

--no-cache --update $FileName$:$FileNameWithoutExtension$.css

I have

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

which seems to be working perfectly.

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.

Thanks again,


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)


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,


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*



Please sign in to leave a comment.