Sign in

Sign up

How to install mdbootstrap into native webpack

MDB SupportCategory: MDB AngularHow to install mdbootstrap into native webpack
davidasteed asked 3 months ago in MDB free, version:4.37


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…


DanielNetzer replied 2 months ago

and another thing, if you want to overwrite image-path then you have to add in

line : 135 // Images Path
line : 136 $image-path: ‘../img/’ !default;

DanielNetzer replied 2 months 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 replied 2 months 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.

Bartłomiej Malanowski replied 2 months 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

davidasteed replied 2 months 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?:
// style library
import {MDBBootstrapModule} from ‘../../node_modules/angular-bootstrap-md’;


@import ‘node_modules/angular-bootstrap-md/scss/bootstrap/bootstrap’;
@import ‘node_modules/angular-bootstrap-md/scss/mdb-free’;

…at 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.