CODEWITHSUNDEEP
gulpgulp-watchgulp-sass
fseminario
fseminario

Reputation: 809

Yeoman / Bower / Gulp Auto Compiling SASS and Refreshing on File Change

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?

Upvotes: 1

Views: 475

Answers (2)

Chris Traveis
Chris Traveis

Reputation: 453

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

Upvotes: 1

fseminario
fseminario

Reputation: 809

I found a solution. Not sure if it is the best way of doing but it works.

In the gulp.watch section of the code (line 98)

gulp.watch('app/styles/**/*.scss', ['styles']);
gulp.watch('app/fonts/**/*', ['fonts']);
gulp.watch('bower.json', ['wiredep', 'fonts']);

I duplicated the first line and just added the path to the Bootstrap .scss files.

gulp.watch('app/styles/**/*.scss', ['styles']);
gulp.watch('bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/**/*.scss', ['styles']);
gulp.watch('app/fonts/**/*', ['fonts']);

Now whenever I change say the $btn-default-bg in the _variables.scss file it automatically recompiles.

The idea is I can add a _[name].scss to the original Bootstrap SASS list and it will be included in the distributed version.

Upvotes: 0

Related Questions