1

##Question asked by CodeCowboy:

I have included some third-party less files which have a dependency on some bootstrap variables but am getting the following error when running grunt dev:

NameError: variable @container-lg is undefined in assets/vendor/jasny-bootstrap/less/variables.less on line 11, column 28:
>> 10 
>> 11 @container-smooth:         @container-lg;
>> 12
Warning: Error compiling assets/vendor/jasny-bootstrap/less/jasny-bootstrap.less Use --force to continue.
I think roots is including bootstrap's variable file first which contains:

@container-large-desktop:      (1140px + @grid-gutter-width);
//** For `@screen-lg-min` and up.
@container-lg:                @container-large-desktop;

So I'm not sure why grunt dev is failing and doesn't see this variable? I realise this is not strictly a roots issue but hopefully someone can help out and it may be specific to root's use of bootstrap.

Relevant section of gruntfile.js

less: {
  dev: {
    files: {
      'assets/css/main.css': [
        'assets/less/main.less',
        'assets/vendor/jasny-bootstrap/less/jasny-bootstrap.less'
      ]
    },
Naveen Kumar Alone
  • 7,536
  • 5
  • 36
  • 57
Arnold Daniels
  • 16,516
  • 4
  • 53
  • 82

1 Answers1

1

Combine with Bootstrap

Preferably you're should load Jasny Bootstrap in the less file that also includes Twitter Bootstrap. So main.less should look something like

@include 'assets/vendor/bootstrap/less/bootstrap.less';
@include 'assets/vendor/jasny-bootstrap/less/jasny-bootstrap.less';

// Your own CSS rules 
...

Standalone

Alternatively you can build Jasny Bootstrap as standalone. In that case use less/build/jasny-bootstrap.less. Change the grunt setting to

less: {
  dev: {
    files: {
      'assets/css/main.css': [
        'assets/less/main.less',
        'assets/vendor/jasny-bootstrap/less/build/jasny-bootstrap.less'
      ]
    },
Arnold Daniels
  • 16,516
  • 4
  • 53
  • 82
  • Thanks - the Standalone option was what I needed. Why is the first option 'combine with bootstrap' preferable? – codecowboy Dec 31 '14 at 07:14
  • Variables like colors or `@grid-float-breakpoint` are used in both Twitter Bootstrap and Jasny Bootstrap. If you compile Jasny Bootstrap as standalone it will use the default settings. So if you modify those variables for Twitter Bootstrap, you'll get strange behavior. Building them together makes sure they're using the same variable values. – Arnold Daniels Dec 31 '14 at 15:38