Reputation: 144
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.
Upvotes: 6
Views: 11064
Reputation: 709
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'
}
}
Upvotes: 0
Reputation: 1494
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.
Upvotes: 0
Reputation: 1114
Looks like you spelled bootstrap wrong:
@import "boostrap";
should be @import "bootstrap";
Upvotes: 2
Reputation: 588
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.
Upvotes: 5
Reputation: 1642
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.
Upvotes: 1