Topic: How to install mdbootstrap into native webpack
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
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Open
Specification of the issue
- User: Free
- Premium support: No
- Technology: MDB Angular
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No
davidasteed commented 7 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: // 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.Bartłomiej Malanowski staff pro premium commented 7 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 thisDanielNetzer commented 7 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 commented 7 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 commented 7 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;