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
             


        

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.