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.


$ 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


I don't believe it is anything to do with my set up of node/sass since I installed sass globally per

I'm running node 10.16.0 managed by nvm, I followed to make sure PHPStorm uses the correct paths.

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

In case it is useful:

Thanks in advance!


1 comment
Comment actions Permalink

Got past the compile error by manually compiling the correct file... style.scss, not _drupal-bootstrap.scss


sass scss/style.scss css/style.css



Please sign in to leave a comment.