I'm trying to setup grunt-recess to include Twitter Bootstrap with overrided variables...
Here's my Gruntfile.js :
'use strict';
module.exports = function (grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
recess: {
plugins: {
options: {
compile: true,
compress: true
},
files: {
'public/css/plugins.css': [
'packages/bootstrap/less/bootstrap.less',
'packages/font-awesome/less/font-awesome.less',
'assets/less/my-variables.less',
// and more...
]
}
}, // plugins
},
});
// ...you know
};
My suggestion would be to create "public/custom" folder for you less override files.
Include the following files "custom-bootstrap.less", "custom-other.less", "custom-variables.less" in the custom folder.
Include the following imports in the "custom-bootstrap.less" file
@import "../less/bootstrap.less";
@import "custom-variables.less";
@import "custom-other.less";
@import "../less/utilities.less";
Then in your grunt file do something like
recess: {
options: {
compile: true
},
custom_bootstrap: {
src: ['custom/custom-bootstrap.less'],
dest: 'dist/css/custom-<%= pkg.name %>.css'
}
}
Then you will just need to include "custom-bootstrap.css" in your project and this will override any existing styles.
This article from smashing magazine explains customizing bootstrap really well.
Be careful of relative paths and make sure they point to the less files based on your project. This is structure is based off of bootstrap version 3.0.3.