How to use Bootstrap for Sass using Grunt.js and Compass?

Question

I would like to use an offical Sass port of Bootstrap together with task runner Grunt.js and framework Compass but according to manual (https://github.com/twbs/bootstrap-sass#bootstrap-for-sass) I didn't succeed. Successfully installed these gems: ``` bootstrap-sass (3.1.0.1, 3.1.0.0) compass (0.12.2) sass (3.2.14, 3.2.13, 3.2.12) ``` My Gruntfile.js: ``` 'use strict'; module.exports = function (grunt) { grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), compass: { options: { httpPath: './', sassDir: '<%= pkg.css.src %>', cssDir: '<%= pkg.css.dest %>', imagesDir: '<%= pkg.graphics.cssPath %>' }, dev: { options: { environment: 'development', outputStyle: 'expanded', force: true } }, prod: { options: { environment: 'production', outputStyle: 'compressed', force: true } } }, }); grunt.loadNpmTasks('grunt-contrib-compass'); grunt.registerTask('default', ['compass:dev']); }; ``` At the beginning of my custom.scss I have: ``` @import "compass"; @import "boostrap"; ``` When I type…

Accepted Answer

I was able to get this working after having the same problem for so long using bootstrap-contrib-sass.

In your Gruntfile, specify the location of your compass and bootstrap-sass gems in the `includePaths` config variable:

```
options: {
    compass: true,
    includePaths: [
        '/var/www/.rvm/gems/ruby-2.1.1/gems/bootstrap-sass-3.1.1.0/vendor/assets/stylesheets',
        '/var/www/.rvm/gems/ruby-2.1.1/gems/compass-0.12.4/frameworks/compass/stylesheets'
    ],
    ...
}
```

Side note: you can run grunt with the `grunt --verbose` flag to dump extra information helpful for debugging.

How to use Bootstrap for Sass using Grunt.js and Compass?

Solution

Problem