Bower - Grunt - Sass

Now that we know the powers of Bower to easily manage our front-end development dependencies, what do we need to do to add a Bower package of Sass code to our project?

Bower install

First off, let’s install a simple Bower package for illustration:

  1. $ bower install css-calc-mixin --save

There, we now have the library of code in our project.

Update Gruntfile.js

Next we want to update the Gruntfile.js so that we can easily include the library into our Sass files. Without this step, we would need to write fill paths in our Sass file to this and that’s simply lame.

In the Grunt-Sass API we have options and the one we need to use is includePaths. Here we can pass in a string that is the full path from root to the Bower package into an array.

  1. module.exports = function(grunt) {
  2.   grunt.initConfig({
  3.     sass: {
  4.       dist: {
  5.         files: {
  6.           'public/stylesheets/style.css': 'sass/style.scss'
  7.         }
  8.       },
  9.       options: {
  10.         includePaths: [
  11.           './bower_components/css-calc-mixin'
  12.         ]
  13.       }
  14.     },
  15.     watch: {
  16.       source: {
  17.         files: ['sass/**/*.scss', 'views/**/*.jade'],
  18.         tasks: ['sass'],
  19.         options: {
  20.           livereload: true, // needed to run LiveReload
  21.         }
  22.       }
  23.     }
  24.   });
  26.   grunt.loadNpmTasks('grunt-contrib-watch');
  27.   grunt.loadNpmTasks('grunt-sass');
  28.   grunt.registerTask('default', ['sass']);
  29. };

Update style.scss

To make use of this new Bower package library, we simply need to use a Sass convention to import the code.

  1. @import "css-calc-mixin";

To test that this is working, let’s add a little bit of code that references the Bower library.

  1. .block {
  2.   @include calc(width, 220px);
  3. }
  5. .block {
  6.   @include calc(margin, 220px, 0);
  7. }
  9. .block {
  10.   @include calc(width, 220px, true, 0);
  11. }
  13. .block {
  14.   @include calc(width, 220px, true, 0, 50%, '+');
  15. }

Back in the CLI, run grunt and we should see green lights all day long!