File Watchers - SCSS / CSS output directory

Hi all,

I am struggling to get my .CSS and .MAP files outputting to the right directory once the file watcher has compiled my SCSS file. I have tried reading various other community forum posts but none of the solutions are working for me so any help would be greatly appreciated.

My project set-up is: /public_html/wp-content/themes/base/scss/theme.scss and for context, the default file watcher works completely fine but is outputting the .CSS and .MAP file within the same directory as the watched file i.e. /scss/

I would like for the .CSS and .MAP file to be in the /css/ directory located /public_html/wp-content/themes/base/css/theme.css

What do I need to change in order to achieve this?

Current settings:

Arguments: $FileName$:$FileNameWithoutExtension$.css
Output paths to refresh: $FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map
Working directory: $FileDir$