menu

Questions & Answers

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

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

Comments:
2023-01-20 10:42:03
In which file do you try to use the mixing? In main.scss?
2023-01-20 10:42:03
No, in a component file, but I import main.scss in the global scss file (default style.scss)
2023-01-20 10:42:03
If you want to use it in a component file you also need to import it in component file I suppose.
2023-01-20 10:42:03
Works! it's very strange because the import should be global, thanks
2023-01-20 10:42:03
That's not how Angular works, you have to import it to every component where you need it.
Answers(1) :

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