CODEWITHSUNDEEP
csstwitter-bootstrapsass
user1066183
user1066183

Reputation: 2584

Use Twitterboostrap 4 mixins in custom namespace

I am compiling twitter boostrap 4 with sass in my custom namespace:

//./main.scss
.twitter-bootstrap {
    @import "./my-scss/bootstrap-overrides";
}
@import ./my-scss/custom.scss

In bootstrap-overrides.scss I only import some components (variables, mixins, functions are imported in bootstrap-overrides.scss

In a custom scss I want to use a mixin:

//./my-scss/custom.scss
@include media-breakpoint-up(md) {
...
}

My compiler show an error:

Error: Undefined mixin.
   ╷
18 │ ┌   @include media-breakpoint-up(md) {
19 │ │     ...
20 │ │     
21 │ └   }
   ╵
  main.scss 15:9                  root stylesheet

How can I use twitterbootstrap 4 mixins in scss files?

Upvotes: 1

Views: 188

Answers (1)

Nisharg Shah
Nisharg Shah

Reputation: 19582

Import in this order

@import "path/scss/functions";
@import "path/scss/variables";
@import "path/scss/mixins";
@import ./my-scss/custom.scss;

Now you can use all bootstrap mixins in custom.scss.

Upvotes: 1

Related Questions