How to include Bootstrap media breakpoint mixins?

  1. MDB Home Page
  2. Support Main Page
  3. MDB Angular
Topic: How to include Bootstrap media breakpoint mixins?

Alex H. asked 7 years 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 staff pro premium commented 7 years ago

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

marts123 pro commented 7 years ago

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

marts123 pro commented 7 years 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 pro commented 7 years 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 staff pro premium commented 7 years ago

@Benben what's your version of MDB Angular?

Alex H. answered 7 years 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

webteam@rbfcu.org answered 7 years ago

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 7 years ago

Any update on this?

ArekSalaso answered 7 years 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.
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: Yes
About author
Alex H.
10Support score
1Questions 1Answers
0Snippets likes 0Snippets