sass - Webstorm SCSS File Watcher does not respect parent directory

Question

My scss has the following structure:

Nested directory view:

style
  sass
    components
      _somecomponent.scss
      _someothercomponent.scss
    style.scss
  style.css

Collapsed directory view:

style/style.css
style/sass/style.scss
style/sass/components/_somecomponent.scss
style/sass/components/_someothercomponent.scss

style.scss includes _somecomponent.scss and _someothercomponent.scss, and is supposed to generate style.css. It does all of this correctly, but the output file is not in the correct directory. Currently it outputs to style/sass/style.css.

Webstorm is configured with the following parameters:

Program: /usr/bin/sass
Arguments: --no-cache --update $FileName$:$FileNameWithoutExtension$.css
Working directory: $FileDir$
Output path: $FileParentDir$$FileNameWithoutExtension$.css

The phpstorm tag has been added because it shares the same file watcher with webstorm. I am using Mac OS X, with the latest Webstorm 9.x.

How do I fix the output path?

Answer 1

Please change the Arguments field accordingly:

    Program: /usr/bin/sass
    Arguments: --no-cache --update $FileName$:$FileParentDir$/$FileNameWithoutExtension$.css
    Working directory: $FileDir$
    Output path: $FileParentDir$/$FileNameWithoutExtension$.css

The 'Output paths to refresh' option doesn't tell the compiler where to put the generated files - you have to set the program arguments accordingly; 'Output paths' is used by IDE to synchronize its file system with external changes - you need to make sure that the pattern specified there matches the actual compiler output so that the IDE knows where to look for generated files. So you need to modify BOTH 'Arguments' and 'Output path to refresh' options to have the generated files created in non-default location.