12

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?

Christian Gärtner
  • 121
  • 1
  • 1
  • 4
  • You have to `@import 'file_with_mixin_definitions.scss';` and then you can use `@include`. – Zydnar Jun 12 '17 at 11:02
  • Thanks, i understand that. but where can I find these mixin definitions for bootstrap 4? – Christian Gärtner Jun 12 '17 at 11:06
  • 4
    Late to the party but just ran inot this issue, solved it by importing: '~bootstrap/scss/functions'; '~bootstrap/scss/variables'; '~bootstrap/scss/mixins/breakpoints'; – bilcker Jul 31 '18 at 19:33
  • A more complete answer following @bilcker's suggestion: https://stackoverflow.com/a/68114046/3009639 – orszaczky Jun 24 '21 at 10:31

1 Answers1

6

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";
Luc
  • 1,765
  • 5
  • 24
  • 44
  • 7
    Or @import "~bootstrap/scss/bootstrap-grid.scss"; :) – Timothy Jul 16 '18 at 14:00
  • Also, if you're selective in which imports you're using, make sure to first import the grid, THEN your own overwrites. With SCSS some things needs to be imported before, and some after - in this case the order is important. – Gisto Jun 08 '20 at 13:58