CODEWITHSUNDEEP
sassbootstrap-4
bp123
bp123

Reputation: 3417

Error using @include with scss

How do I get media queries to work in bootstrap? I have a SCSS file, I think I need to import something but I have no idea what.

Error message:

Scss compiler error: Error: no mixin named media-breakpoint-up

Path: homepage.scss

@include media-breakpoint-up(sm) {
  h1.home-page {
    font-size: 3rem;
  }
}

Upvotes: 2

Views: 3229

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362380

You could @import the entire "bootstrap" scss, and then define the custom @include...

@import "bootstrap";

@include media-breakpoint-up(sm) {
  h1.home-page {
    font-size: 3rem;
  }
}

or, you can import functions, variables and mixins (since this includes only what is needed for the mixin)...

@import "bootstrap/functions";
@import "bootstrap/variables";
@import "bootstrap/mixins";

/* change col style on sm only */
@include media-breakpoint-up(sm) {
  h1.home-page {
    font-size: 3rem;
  }
}

@import "bootstrap";

It all depends on what other customizations you have.

https://codeply.com/go/3zTbKtczVd

Also see: How to extend/modify (customize) Bootstrap 4 with SASS

Upvotes: 3

Related Questions