Swiip’s Gulp Angular and Bootswatch SASS Themes

EDIT April 6, 2016: It seems I was was mistaken. There is a critical placement required for the second @import to go after the //endbower injector directive. This is something I had done originally but had assumed it was working just as well without. I was wrong. I’ve corrected the steps below.

I like Swiip’s generator-gulp-angular for Yeoman. It’s pretty complete, if not a little daunting at times. It does a lot. It does a lot automagically. So when I set out to add a SASS Bootswatch theme I was a little unsure of what to expect.

It took me a bit of Googling and piecing together old information with new source code but I eventually figured out what was actually a simple solution to an obscure problem.

This assumes you built your gulp-angular seed project with SASS preprocessing.

  1. First you need to install Bootswatch as a dependency:
    bower install bootswatch --save
    

    or if you have specific Bootstrap version needs,

    bower install bootswatch@3.3.6 --save
    
  2. Now you need to open the src/app/index.scss and add two @import lines after the first comment block (using the sandstone theme as an example):

    From this…

    /**
     *  If you want to override some bootstrap variables, you have to change values here.
     *  The list of variables are listed here bower_components/bootstrap-sass/assets/stylesheets/bootstrap/_variables.scss
     */
    
    $navbar-inverse-link-color: #5AADBB;
    $icon-font-path: "../../bower_components/bootstrap-sass/assets/fonts/bootstrap/";
    
    /**
     *  Do not remove the comments below. It's the markers used by wiredep to inject
     *  sass dependencies when defined in the bower.json of your dependencies
     */
    

    To this…

    /**
     *  If you want to override some bootstrap variables, you have to change values here.
     *  The list of variables are listed here bower_components/bootstrap-sass/assets/stylesheets/bootstrap/_variables.scss
     */
    
    
    // add this before the bower injector
    @import '../../bower_components/bootswatch/sandstone/variables';
    
    
    $icon-font-path: "../../bower_components/bootstrap-sass/assets/fonts/bootstrap/";
    
    /**
     *  Do not remove the comments below. It's the markers used by wiredep to inject
     *  sass dependencies when defined in the bower.json of your dependencies
     */
    // bower:scss
    // endbower
    
    
    // add this line after the bower injector
    @import '../../bower_components/bootswatch/sandstone/bootswatch';
    

    Notice I removed the line $navbar-inverse-link-color: #5AADBB;.

That’s it. Two step process. Enjoy.

 

Adam Merrifield

 

Leave a Reply