How to include Bootstrap media breakpoint mixins?

Alex H. asked a year ago

As in Bootstrap 4 the "hidden-" classes were removed (see here) they suggest using the "media-breakpoint-up/down/only" Sass mixins.

The MDB Angular Bootstrap docs tells us that these classes are used, but not how to use them in our own code. So If I want to use e.g. "media-breakpoint-up()" Mixin, how do I include that? Just adding "@include media-breakpoint-up(sm) { }" into the main style.scss or a module's scss file does not resolve it (Error: "No mixin named media-breakpoint-up")

 

I'm using MDB Angular 4.3.7 with angular-cli.

Thanks in advance!
-Alex


Bartłomiej Malanowski commented a year ago

I'd like to take a look at your files. Please send me your project at b.malanowski@mdbootstrap.com


marts123 commented 9 months ago

I am also wondering what the solution is. I am having the same issue


marts123 commented 9 months ago

I had to change /node_modules/ng-mdb-pro/assets/scss/mdb/free/data/_variables-b4.scss due to the error Incompatible units: 'rem' and 'px'.


Benben commented 7 months ago

Same here.
ERROR in ./src/app/root/components/sidebar/sidebar.component.scss
Module build failed:
@include media-breakpoint-only(xs) {
^
No mixin named media-breakpoint-only

Backtrace:
stdin:69
in /Users/work/Projects/LAP/src/app/root/components/sidebar/sidebar.component.scss (line 69, column 10)


Bartłomiej Malanowski commented 7 months ago

@Benben what's your version of MDB Angular?


Alex H. answered 7 months ago

Hi there,

it's been a while and I upgraded to the most current version 5.2.2.
Unfortunately the docs still say that responsive breakpoints should work with Sass mixins (https://mdbootstrap.com/angular/layout/bootstrap-layout/#responsive-breakpoints), but they still do not.

Any fixes or workarounds for that besides manually defining the breakpoints?

Thanks,
Alex


Same here

Module build failed:
@include media-breakpoint-down(sm) { ... ^

Invalid CSS after "...oint-down(sm) {": expected "}", was "... }"
in C:Repositoriesnbo-clientsrcappnavnav.component.scss (line 19, col umn 37)
Error:
@include media-breakpoint-down(sm) { ... }
^
Invalid CSS after "...oint-down(sm) {": expected "}", was "... }"


webteam@rbfcu.org commented 6 months ago

Any update on this?


ArekSalaso answered 4 months ago

is this resolved? for angular project it is not possible to use mixins withins app scss main file. What's more - there is no possibility to add custom styles or create custom skins because all the files are in the node_modules so next update will probably destroy everything.


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: Yes