Monkey Monk Monkey Monk - 7 months ago 54
Less Question

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) {

pkg: grunt.file.readJSON('package.json'),

recess: {
plugins: {
options: {
compile: true,
compress: true
files: {
'public/css/plugins.css': [
// and more...
}, // plugins

// 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-<%= %>.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.