Topic: How to install mdbootstrap into native webpack

davidasteed free asked 5 years ago

Hi, We're using native webpack ("webpack-dev-server": "2.4.1",) for an Angular 4 application.  NOT Angular-cli. Is this the proper method to enable mdbootstrap? In vendor.scss: // component library (and roboto font) @import 'node_modules/angular-bootstrap-md/scss/bootstrap/bootstrap'; @import 'node_modules/angular-bootstrap-md/scss/mdb-free'; I ask because to make the above statements avoid the "Incompatible units: 'px' and 'rem'." error, I had to manually edit line 669 in node_modules/angular-bootstrap-md/scss/bootstrap/_variables.scss to be: $popover-arrow-outer-width: ($popover-arrow-width + 0.0625rem) !default; as per: I'm already getting pushback from the team that this workaround is Not a Good Thing, even before we get a chance to consider purchasing the for-pay library features. This may influence us to stop using mdbootstrap... thanks

davidasteed free commented 5 years ago

it turns out that the manual fix wasn't necessary. There was a conflict with another library. When we comment out this line, the error “Incompatible units: ‘px’ and ‘rem’.” does not appear: // @import 'node_modules/bootstrap-material-design/scss/bootstrap-material-design'; The question remains though: are the following the proper steps to activate mdbootstrap in a native webpack (and Angular 4) application?: app.module.ts: // style library import {MDBBootstrapModule} from '../../node_modules/angular-bootstrap-md'; @NgModule({ MDBBootstrapModule.forRoot() vendor.scss: @import ‘node_modules/angular-bootstrap-md/scss/bootstrap/bootstrap’; @import ‘node_modules/angular-bootstrap-md/scss/mdb-free’; the moment, only the basic modals are working...most modal examples are getting "stuck" after the button is clicked...and cannot be accessed and the whole page remains dim.

Bartłomiej Malanowski staff commented 5 years ago

Hi, there! I'm afraid we cannot recreate your problem. Could you please provide us more details? Please provide us your sample code. We'd like to take a look at this

DanielNetzer free commented 5 years ago

hey david in trying to figure out the same thing as you, did you managed to get this working eventually? i'm having another issue with the assets in MDBootstrap library.

DanielNetzer free commented 5 years ago

btw I did managed to solve this incompatible units issue by changing $popover-arrow-outer-width: $popover-arrow-width + 1px !default; to this -> $popover-arrow-outer-width: calc($popover-arrow-width + 1px) !default; as per scss adding or substracting must have a calc function or units at the end of the call, otherwish it'll change it into a string.

DanielNetzer free commented 5 years ago

and another thing, if you want to overwrite image-path then you have to add in node_modules/ng-mdb-pro/assets/scss/mdb/free/data/_variables.scss line : 135 // Images Path line : 136 $image-path: '../img/' !default;

Please insert min. 20 characters.


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



Specification of the issue

  • User: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No