How can I configure a file watcher to work correctly with a Drupal 8 Bootstrap 3 sub theme?

I'm trying to configure a sass file watcher for my Drupal sub theme.

Judging from the default Sass file watcher variables, it expects a 1 to 1 relationship between the .scss file being edited and the .css file sass should output, correct?

The Drupal Bootstrap sub theme documentation says I should tell Sass to compile <subtheme root>/scss/_drupal-bootstrap.scss to <subtheme root>/css/style.css.

I've tried using absolute paths like this screenshot:

But when I edit and save /path/to/project/root/app_drupal/src/web/themes/custom/subtheme/scss/_drupal-bootstrap.scss nothing appears to happen.

If I run it from the command line, I get an error. So I'd expect PHPStorm to error as well.

[code]

$ sass _drupal-bootstrap.scss ../style.css
Error: Undefined variable.
╷
10│ font-weight: $alert-link-font-weight;
│ ^^^^^^^^^^^^^^^^^^^^^^^
╵
drupal-bootstrap/component/_alert.scss 10:16 @import
_drupal-bootstrap.scss 1:9 root stylesheet

[/code]

I don't believe it is anything to do with my set up of node/sass since I installed sass globally per https://www.jetbrains.com/help/phpstorm/transpiling-sass-less-and-scss-to-css.html#install_sass_scss

I'm running node 10.16.0 managed by nvm, I followed https://medium.com/@danielzen/using-nvm-with-webstorm-or-other-ide-d7d374a84eb1 to make sure PHPStorm uses the correct paths.

Am I just missing something? Any suggestions would be helpful.

In case it is useful:

• https://www.drupal.org/project/bootstrap is the parent theme.
• https://drupal-bootstrap.org/api/bootstrap/docs!Sub-Theming.md/group/sub_theming/8.x-3.x explains the process of creating a sub theme.
• https://github.com/unicorn-fail/drupal-bootstrap-styles/tree/v0.0.2/src/3.x.x/8.x-3.x/scss#compiling explains how you should compile the scss files.

Thanks in advance!