1

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?

fseminario
  • 801
  • 1
  • 9
  • 13

2 Answers2

1

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

Chris Traveis
  • 443
  • 3
  • 8
  • That makes sense regarding the bad practice but all I would need to do is add back in the _custom.scss file back into the _bootstrap.scss. As long as "bower update" doesn't delete files it should work. I was having issues importing using my method so coincidentally I am doing what you suggested at the moment. I am able to import the _variables.scss file into my main.scss; however, I am unable to overwrite the bootstrap variable "$brand-success:" to yellow. Are you able to get your way to work without a problem? – fseminario Mar 31 '15 at 23:18
  • Oh I just realized you can't override an imported variable with a value after the @import line - it has to be before. If it is after it has to be either another $variable: $variable or .class { color: $variable; } but not $variable: color;. http://stackoverflow.com/questions/11773583/can-i-override-sass-variables-after-they-have-been-imported – fseminario Mar 31 '15 at 23:32
  • _"Copy the _variables.scss file from the bower_components folder to eg. app/styles, then import it into your main.scss, or whatever it's named, above the import statement for bootstrap. This will result in your custom file overriding the default variables."_ as per this thread [Custom Bootstrap with Bower](http://stackoverflow.com/questions/15385705/how-to-keep-twitter-bootstrap-customization-with-bower) – Chris Traveis Apr 01 '15 at 15:25
0

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.

fseminario
  • 801
  • 1
  • 9
  • 13