Bootstrap 5 + SASS error: undefined MIXIN @include _assert-ascending

Question

I'm learning SCSS following a freecodecamp tutorial, but I keep getting the following error on the CLI for live sass: watch:

Error: Undefined mixin.
    ╷
320 │ @include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
    │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    ╵
  node_modules\bootstrap\scss\_variables.scss 320:1  @use
  node_modules\bootstrap\scss\bootstrap.scss 11:1    @import
  scss\_custom.scss 58:8                             @use
  scss\style.scss 1:1  

Could anyone that is more experienced in SASS point me in the right direction, I have no idea what to do from here. Do I need to add imports our @use to the custom.scss?

Milliemillieme

Answer 1

I had this problem. My issue was that I was importing in the wrong order:

@import '../node_modules/bootstrap/scss/mixins';
@import '../node_modules/bootstrap/scss/functions';
@import '../node_modules/bootstrap/scss/variables';

I got rid of it by changing it to

@import '../node_modules/bootstrap/scss/functions';
@import '../node_modules/bootstrap/scss/variables';
@import '../node_modules/bootstrap/scss/mixins';

You need these three imports in this specific order. You are probably missing one of the imports or wrote it in the wrong order too.

Suu

Answer 2

I just ran into this issue. You also need to include functions.css.

https://github.com/twbs/bootstrap/issues/23451

Notional

Where do I include functions.css? I'm confused about that part, I looked into the thread and couldn't get it to work. – Milliemillieme

That should all be coming in with bootstrap.scss, same with variables. I ran into the issue building out some angular components, and only including a few bootstrap components. – Notional