Error using @include with scss

Question

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

Are you using compiled version (.css) of bootstrap? – Rolandas Barysas Aug 18 '18 at 05:47 — Rolandas Barysas, Aug 18 '18 at 05:47

Carol Skelly · Answer 1 · 2021-04-20T13:57:47.600

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

Error using @include with scss

1 Answers1