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?

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.