Geek Answers Handbook

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

I would like to use the official Sass Bootstrap port along with the Grunt.js task runner and the Compass framework, but according to the manual ( https://github.com/twbs/bootstrap-sass#bootstrap-for-sass ) t successfully.

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

at the command prompt, I get the 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 the bootstrap crane in Grunt? Install the new Grunt plugin? Thanks for any answer.

+6
source share
5 answers

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

In your Grunt file, specify the location of your compasses and bootstraps in the includePaths configuration:

 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 using the grunt --verbose flag to reset additional information useful for debugging.

+5
source

It looks like you did the wrong download:

@import "boostrap"; must be @import "bootstrap";

+2
source

You use grunt for all the beauty it offers, but you use the bootstrap pearl.

Grunt uses npm reporting.

For a simple fix, use bootstrap-sass

To improve overall performance, combine this package above with grunt-bootstrap , replacing less files for sass, as well as any other links, and then repackaging it as your own release. He will then offer a complete set of tools for automating rooting.

+1
source

In the GruntFile compass options, you can also add:

 raw: 'require "bootstrap-sass"'

Therefore, the parameters 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' } }
0
source

You can simply use:

 require: 'bootstrap-sass'

in your compass options file, for example:

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

This avoids the need for hard-coded paths in your grunt file.

0
source

More articles:


All Articles