Sign in


Sign up


How to install mdbootstrap into native webpack

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

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:

// mdbootstrap.com 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: https://mdbootstrap.com/support/error-when-building-scss-with-laravel-5-5-mix/

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

DanielNetzer replied 1 week 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;

DanielNetzer replied 1 week 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 1 week 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 weeks 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 weeks 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:
// mdbootstrap.com 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’;

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