Search code examples
lessjasny-bootstrap

Failed to compile Jasny Bootstrap's LESS file

##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'
      ]
    },
Solution

  • 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'
      ]
    },