How to use Bootstrap 4 media breakpoints in SASS?

Question

On the official bootstrap website it says:

Since we write our source CSS in Sass, all our media queries are available via Sass mixins:

@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;
  }
}

Now, I am using SASS for my CSS, and I am also using Bootstrap, but I am combining the two only by including them in the HTML.

When i try to do something like this in my SASS file:

@include media-breakpoint-up(xl) { ... }

I get an error:

Undefined Mixin

I guess that this is because my SASS file does not know about Bootstrap, since I only include the Bootstrap in the HTML.

How can I include Bootstrap 4 into my SASS file, as a partial? (I guess that this is what I have to do...)

PS: I am using Bootstrap 4, and I would prefer a solution that does not require Bower or RubyGems etc. but just to download the Bootstrap file and include it into my SASS the old-fashioned way - if that is possible at all?

Solution

Download the entire source code, and look in scss/mixins. The file _breakpoints.scss is the one you should have. I do the same thing, I download the source code and include the things I need in my own compiled css.

@import "_variables";
@import "_mixins";
@import "_grid";

Comments

[bilcker]

Late to the party but just ran inot this issue, solved it by importing: '~bootstrap/scss/functions'; '~bootstrap/scss/variables'; '~bootstrap/scss/mixins/breakpoints';

[Timothy]

Or @import "~bootstrap/scss/bootstrap-grid.scss"; :)