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

6
votes

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

grunt

in command line I get following error:

Syntax error: File to import not found or unreadable: boostrap.
   Load paths:
     c:/Users/Radek/WWW/svobodanabytek/src/sass
     C:/Ruby193/lib/ruby/gems/1.9.1/gems/compass-0.12.2/frameworks/blueprint/stylesheets
     C:/Ruby193/lib/ruby/gems/1.9.1/gems/compass-0.12.2/frameworks/compass/stylesheets
     Compass::SpriteImporter
        on line 2 of c:/Users/Radek/WWW/svobodanabytek/src/sass/custom.scss

Without line 2 (@import "boostrap";) everything works fine.

What should I do to start using bootstrap-sass gem in Grunt? Install some new Grunt plugin? Thanks for any answer.

5
twitter-bootstrapsassgruntjscompass-sass
If you were running Compass by itself, I would point to the fact that you haven't required it in your config.rb. I know nothing about Grunt or how you would go about specifying the dependency. – cimmanon

5 Answers

5
votes

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.

2
votes

Looks like you spelled bootstrap wrong:

@import "boostrap"; should be @import "bootstrap";

1
votes

You're using grunt for all the beauty it offers, yet you're using the gem of bootstrap.

Grunt uses the npm repo.

For a simple fix, use bootstrap-sass

For a better overall working, merge that above package in with grunt-bootstrap replacing the less files for sass, as well as any other references, then repackage that as your own release. This will then offer the full grunt automation goodies.

0
votes

You can just use:

require: 'bootstrap-sass'

in your compass options file, like so:

compass: {
  options: {
    sassDir: 'src/sass',
    cssDir: 'dist/css',
    environment: 'production',
    require: 'bootstrap-sass'
  }
}

This avoids having to hardcode paths in your gruntfile.

0
votes

In the GruntFile "compass options" you can also add:

raw: 'require "bootstrap-sass"'

So the options should look something like this:

compass: {
    options: {
        sassDir: '<%= yeoman.app %>/sass',
        cssDir: '.tmp/styles',
        generatedImagesDir: '.tmp/images/generated',
        imagesDir: '<%= yeoman.app %>/images',
        javascriptsDir: '<%= yeoman.app %>/scripts',
        fontsDir: '<%= yeoman.app %>/fonts',
        importPath: './bower_components',
        httpImagesPath: '/images',
        httpGeneratedImagesPath: '/images/generated',
        httpFontsPath: '/fonts',
        relativeAssets: false,
        assetCacheBuster: false,
        raw: 'require "bootstrap-sass"\nSass::Script::Number.precision = 10\n'
    }
}