CODEWITHSUNDEEP
csstwitter-bootstraplessgruntjs
Martin Josefsson
Martin Josefsson

Reputation: 1083

Why does grunt-contrib-less not find bootstrap variables?

I'm writing a web app, and want to hook up some css @media queries to variables in Bootstrap. So I downloaded bootstrap and decided to let my grunt compile it, when it compiles my own less files.

The relevant part of my Gruntfile looks like this

less: { 
  dev: {
    options:{  
      paths: ['app/stylesheets', 'app/stylesheets/bootstrap'], // All the `less` files from bootstrap are placed in 'app/stylesheets/bootstrap' //  
    },  
    files: {  
      'build/pretty/style.css':'app/stylesheets/**/*.less'  
    }  
  }
}

But when I run grunt grunt less:dev it fails and outputs 

Running "less:dev" (less) task
>> NameError: variable @alert-padding is undefined in app/stylesheets/bootstrap/alerts.less on line 10, column 12:  
>> 9 .alert {  
>> 10   padding: @alert-padding;  
>> 11   margin-bottom: @line-height-computed;  
Warning: Error compiling app/stylesheets/bootstrap/alerts.less Use --force to continue.  

Aborted due to warnings.

I've tried every way I can imagine,

Upvotes: 4

Views: 3229

Answers (1)

gustavohenke
gustavohenke

Reputation: 41440

This is because you're trying to compile every .less file in your app/stylesheets directory, then concatenate them into build/pretty/style.css. That's how the task is supposed to work.

You probably will have better luck with something like this:

// app/stylesheets/style.less
@import "bootstrap/bootstrap.less";

// Now you'll have every bootstrap mixin, variable, class, etc available

then, in your task:

less: {
  dev: {
    files: {
      'build/pretty/style.css': 'app/stylesheets/style.less'
    }
  }
}

If you want just the variables and mixins, you could use @import (reference) "bootstrap/bootstrap.less"; instead. This way no Bootstrap styles will be output.

Upvotes: 1

Related Questions