Gulp errors after installing Bootstrap v4 in Sage 8.4.2

sage
1

Hi Roots crew,

I’m trying to upgrade the Bootstrap 3.3.6 install included in Sage 8.4.2 so I can use flexbox classes and a few other fun features.

Using bower I uninstalled the default bootstrap. Then I removed the bootstrap dependency from bower.json and installed bootstrap#v4.0.0-alpha.4 from the bower cli.

Unfortunately this seems to have broken gulp. When I compile styles in gulp, I run into errors. Gulp thinks several mixins are missing. I see the mixins exist inside /bower_components/bootstrap… How can I get the gulp process inside /assets/styles/components/ to recognize those mixins exist?

This is my first foray into the world of Sage development so I’m confident I missed something simple. I’m blown away by the documentation, screencasts, and active community here-light years beyond the Wordpress environments I’ve used before.

All input appreciated.

Thanks,
James

2

What are the exact errors?

3

This sort of stuff. If I comment the calls from a specific assets/styles/components/ file it goes down to another mixin:

Error: no mixin named list-unstyled

       Backtrace:
       	assets/styles/components/_comments.scss:2
        on line 2 of assets/styles/components/_comments.scss
>>   @include list-unstyled;
   -----------^


assets/styles/components/_grid.scss
Error: no mixin named make-sm-column

       Backtrace:
       	assets/styles/components/_grid.scss:3
        on line 3 of assets/styles/components/_grid.scss
>>   @include make-sm-column($main-sm-columns);
   -----------^
4

Well you’ve switched over to BS4 but Sage 8 uses BS3 mixins and that’s what you’re running into.

I recommend you copy the stylesheets from Sage 9 which ships using the BS4 mixins: https://github.com/roots/sage/tree/master/assets/styles

2 Likes
5

Thanks very much—you are of course quite correct. I swapped the stylesheets and all is well.

However, I’m now slightly confused about how Gulp compiles CSS.

If I understand correctly, Gulp starts at assets/styles/main.scss and then pulls bower_components/bootstrap/scss/bootstrap.scss before looking for .scss files inside assets. If that’s the case… wouldn’t the BS mixins be available before Gulp hits assets?

As an example, in Sage 8.4.2, _comments.scss contains this call:

  @include list-unstyled;
}```

Which changes to

```.comment-list {
  @extend .list-unstyled;
}```

in Sage 9.

 Isn't `list-unstyled` available either way? I'll slink away quietly when it's clear there's a large gap in my understanding of gulp compiling
6

This is everything you need:

1 Like