I can't get Yeoman / Bower / Gulp and the gulp-webapp generator to auto compile SASS changes made to the Bootstrap _variables.scss file and reload.
Basically changes done to files in this path: /bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/
I spent some time tweaking the gulpfile.js and managed to get autoreload to work on changes made to any files in the path above; however, it doesn't recompile the sass files. The only way to recompile is using the "gulp" command but that would be counter productive.
I am stumped after many hours, could someone please help shed some light on this?
The project by design is set up to only watch for changes to your personal style files in the app/styles/ directory and it's sub directories.
The idea of modifying files in the /bower_components directory is generally considered a bad practice. If you were to accidentally run bower update, it would overwrite all of you changes to your modified bower files.
Instead you could use sass to @import the bootstrap .scss files into your main.scss file from /bower_components. then you can redefine all of the styles you want using these sass variables