title: Using media breakpoints in Bootstrap 4 / SASS - _breakpoints.scss does not know $grid-breakpoints
body: <p>I am trying to use media queries in Bootstrap 4.</p>
  
  <p>On <a href="https://v4-alpha.getbootstrap.com/layout/overview/" rel="noreferrer">their website</a> they do this:</p>
  
  <pre><code>@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;
    }
  }
  </code></pre>
  
  <p>So I grabbed the Bootstrap SCSS, and copied the <code>_breakpoints.scss</code> and included this in my project. I import it, and then try to use a media query:</p>
  
  <pre><code>@import "partials/breakpoints";
  
  @include media-breakpoint-up(sm) {
  
    .mycontainer  {
      background-color: black;
    }
  }
  </code></pre>
  
  <p>However, I get the following error when i compile SASS:</p>
  
  <blockquote>
    <p>Change detected to: main.scss
          error pages/_geschichte.scss (Line 54: Undefined variable: "$grid-breakpoints".)</p>
  </blockquote>
  
  <p>Am I doing this the wrong way or will I need to include more files? I then tried to fix that by also including <code>_grid.scss</code>, 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.</p>