Gulp Error: no mixin named make-col-ready

sage
1

I am on Sage 8.5.1

Here is my bower.json that works fine:

{
  "name": "sage",
  "homepage": "https://roots.io/sage/",
  "authors": [
    "Ben Word <ben@benword.com>"
  ],
  "license": "MIT",
  "private": true,
  "dependencies": {
    "bootstrap": "git://github.com/twbs/bootstrap.git#v4.0.0-alpha.6",
    "waypoints": "^4.0.1",
    "animate.css": "^3.5.2",
    "sequencejs": "^2.1.0"
  },
  "overrides": {
    "waypoints": {
      "main": [
        "./lib/jquery.waypoints.js"
       ]
     }
  }
}

But if I do this (trying to add carousel using override):

{
  "name": "sage",
  "homepage": "https://roots.io/sage/",
  "authors": [
    "Ben Word <ben@benword.com>"
  ],
  "license": "MIT",
  "private": true,
  "dependencies": {
    "bootstrap": "git://github.com/twbs/bootstrap.git#v4.0.0-alpha.6",
    "waypoints": "^4.0.1",
    "animate.css": "^3.5.2",
    "sequencejs": "^2.1.0"
  },
  "overrides": {
    "waypoints": {
      "main": [
        "./lib/jquery.waypoints.js"
       ]
     },
     "bootstrap": {
      "main": [
        "./js/dist/carousel.js"
      ]
    }
  }
}

Then gulp stops working, and gives this error:
[11:30:30] Starting ‘styles’…
assets/styles/components/_grid.scss
Error: no mixin named make-col-ready

       Backtrace:
       	assets/styles/components/_grid.scss:3
        on line 3 of assets/styles/components/_grid.scss
>>   @include make-col-ready();
   -----------^

Error in plugin 'gulp-sass'
Message:
    assets/styles/components/_grid.scss
Error: no mixin named make-col-ready
2

I am guessing it’s because in the file assets/styles/components/_grid.scss, there is a call to make-col-ready() which is a mixin found in bower_components/bootstrap/scss/mixins/_grid.scss in the Bootstrap package.

But in your override for Bootstrap you are only including /js/dist/carousel.js and excluding everything else (for instance _grid.scss).

You mention that you want to add carousel.js for Bootstrap but I don’t think you have to do that since it comes with Bootstrap by default.

I see overrides for Bootstrap as a way to exclude stuff that you don’t need in order to keep the css/js as lean as possible.

Here’s a Gist that I created recently as a starting point for overriding Bootstrap stuff: https://gist.github.com/folbert/94f0b82a8807fb70f7346db7fb258ff6