CODEWITHSUNDEEP
javascripttwitter-bootstrapgruntjsless
Monkey Monk
Monkey Monk

Reputation: 990

Gruntfile.js - How to use recess and override bootstrap variables?

I'm trying to setup grunt-recess to include Twitter Bootstrap with overridden 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.

Could someone tell me how I can override Bootstrap Variables using grunt and without actually editing Bootstrap package?

Upvotes: 2

Views: 2034

Answers (1)

marty
marty

Reputation: 484

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.

Upvotes: 1

Related Questions