9

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?

Zoe
  • 27,060
  • 21
  • 118
  • 148
Joe Rodriguez
  • 91
  • 1
  • 3

2 Answers2

17

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.

Kewyn Vieira
  • 339
  • 3
  • 9
0

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

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

Mark Handy
  • 1,180
  • 1
  • 11
  • 23
  • Where do I include functions.css? I'm confused about that part, I looked into the thread and couldn't get it to work. – Joe Rodriguez Jul 22 '21 at 18:09
  • 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. – Mark Handy Jul 23 '21 at 19:18