Scss: @include media-breakpoint-down: Undefined mixin but I import bootstrap class

Question

I tried to use @include media-breakpoint-up in Angular but when compile get this error

Bootstrap 5.1.13

Angular CLI: 10.2.4

Node: 14.17.2

OS: win32 x64

Angular: 10.2.5

ERROR in Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined mixin.
  ╷
6 │ ┌         @include media-breakpoint-down(md) {
7 │ │             width: 100%;
8 │ │             margin: 0 10px 0 10px;
9 │ └         }

style class

.mat-form-field{
        width: 460px;

        @include media-breakpoint-down(md) {
            width: 100%;
            margin: 0 10px 0 10px;
        }
    }

import in main.scss @import '~bootstrap/scss/bootstrap-utilities';

bootrap class in html working normally

where is wrong? Thanks

I tried to import every single bootsrap class (in correct order), i tried to restart Angular ng serve but never working

No, in a component file, but I import main.scss in the global scss file (default style.scss) — apnnux, Apr 03 '22 at 14:28
If you want to use it in a component file you also need to import it in component file I suppose. — cloned, Apr 04 '22 at 06:22
Works! it's very strange because the import should be global, thanks — apnnux, Apr 04 '22 at 08:41
That's not how Angular works, you have to import it to every component where you need it. — cloned, Apr 04 '22 at 09:56

ibrahimgb · Answer 1 · 2023-01-20T10:48:04.580

9

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

these imports are needed for it to work

edited Jan 20 '23 at 10:48

answered Jan 20 '23 at 10:06

ibrahimgb

693
5
13

score 2 · Accepted Answer · answered Jun 24 '22 at 14:30

2

As suggested by cloned you have to import the bootstrap file on each SCSS component.

answered Jun 24 '22 at 14:30

apnnux

361
4
11

Scss: @include media-breakpoint-down: Undefined mixin but I import bootstrap class

2 Answers2