Using media breakpoints in Bootstrap 4 / SASS - _breakpoints.scss does not know $grid-breakpoints

Question

I am trying to use media queries in Bootstrap 4.

On their website they do this:

@include media-breakpoint-up(xs) { ... }
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }

// Example usage:
@include media-breakpoint-up(sm) {
  .some-class {
    display: block;
  }
}

So I grabbed the Bootstrap SCSS, and copied the _breakpoints.scss and included this in my project. I import it, and then try to use a media query:

@import "partials/breakpoints";

@include media-breakpoint-up(sm) {

  .mycontainer  {
    background-color: black;
  }
}

However, I get the following error when i compile SASS:

Change detected to: main.scss error pages/_geschichte.scss (Line 54: Undefined variable: "$grid-breakpoints".)

Am I doing this the wrong way or will I need to include more files? I then tried to fix that by also including _grid.scss, but then for this, something else is required again, so I got unsure whether this is indeed the right way and thought I'd better ask.

Answer 1

Did you include the bootstrap variables.scss ? Seems like the variables are missing