How to install mdbootstrap into native webpack

davidasteed asked 9 months 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:

// 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


davidasteed commented 9 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?:
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 commented 9 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


DanielNetzer commented 9 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.


DanielNetzer commented 9 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 commented 9 months 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.
Status

Open

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