Go back to the main page

Importing Bootstrap on a Grunt Compass build task

 

Say you got a Compass project and you want to add some Bootstrap goodness to the /app/styles/main.scss like so:

@import "bootstrap";

#dialog-wrapper-contacts.contacts-dialog .dialog-modal .modal-body {
  .dropdown {
    display: inline;
  }
}

In the Gruntfile you need to add Bootstrap to the importPath:

  
},
compass: {
    options: {
        sassDir: '<%= yeoman.app %>/styles',
        cssDir: '<%= yeoman.app %>/styles',
        generatedImagesDir: '.tmp/images/generated',
        imagesDir: '<%= yeoman.app %>/images',
        javascriptsDir: '<%= yeoman.app %>/scripts',
        fontsDir: '<%= yeoman.app %>/styles/fonts',
        importPath: [ '<%= yeoman.app %>/bower_components', '/Users/christian/.rvm/gems/ruby-1.9.3-p484/gems/bootstrap-sass-3.1.1.1/vendor/assets/stylesheets/'],
        httpImagesPath: '/images',
        httpGeneratedImagesPath: '/images/generated',
        relativeAssets: false
    },
 
  • Pushed on 12/31/2014 by Christian