Gruntfile.js - How to use recess and override bootstrap variables?
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
};
In that case, 'my-variables.less' is not used...
For now, I'm adding it with my own little hands inside 'packages/bootstrap/less/bootstrap.less'.
Obviously, that is not a good practice...
Is everyone could tell me how I can override Bootstrap Variables using grunt and without actually editing Bootstrap package ?
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.