MDB Pro jQuery SCSS import fails


Topic: MDB Pro jQuery SCSS import fails

rickgoemans pro asked 6 months ago

Expected behavior

When you download the jQuery Pro package and add the @import "~mdbootstrap-pro/scss/mdb-pro"; to your own SCSS file, the MDB pro styling should be correctly imported without any errors.

Actual behavior

If you import import the scss you get the following error:

 Module not found: Error: Can't resolve '../../node_modules/mdbootstrap-pro/scss/img/overlays/01.png' in '/Users/rickgoemans/Code/hobbybeurs/resources/sass'

Resources (screenshots, code snippets etc.)

I think the problem is related to the $image-path variable in <package>/scss/core/_variables.scss not pointing to the correct directory. In the downloaded source it is $image-path: "../img" !default; while it should be : $image-path: "../../img" !default;

But if you correct that one you get the following error:

Module not found: Error: Can't resolve '../../node_modules/mdbootstrap-pro/scss/pro/img/lightbox/default-skin.png' in '/Users/rickgoemans/Code/hobbybeurs/resources/sass'

Which I think is also related to this variable because it is loaded through $pswp__button-background: url(#{$image-path}/lightbox/default-skin.png) !default; in <package>/sccs/pro/_variables.scss.

Please fix this because at the moment the package is useless and I'm leaning towards a refund.


Marta Szymanska staff pro premium answered 6 months ago

Hi,

thank you for noticing this, we will fix this as soon as possible in the newest version of MDB package. Do you need any workaround for now just for your custom project? You can send me your project to m.szymanska@mdbootstrap.com and I'll check it.

Best, Marta


rickgoemans pro commented 6 months ago

Hey,

I noticed version 4.13.0 release so I gave it another shot. Unfortunatly the problem still remains. Here's a raw paste of my SCSS parser ouput: https://pastebin.com/3dBFivyq

I'm using the Laravel framework which uses webpack and "laravel-mix" to combine all assets into a single file (scss -> app.css, js -> app.js).

All I do is (starting from a fresh Laravel install):

yarn add -D [mdbootstrap-pro-jquery-git-link]

@import "~mdbootstrap-pro/scss/mdb-pro";

And then the errors are shown in laravel-mix output (simply combining all scss).


rickgoemans pro commented 6 months ago

I've sent you an email with a plain/fresh Laravel project and MDBoostrap jQuery 4.13.0 added which give the same errors.


Marta Szymanska staff pro premium commented 6 months ago

Hi,

thank you for sending me your project. I'll check this out and come back to you with a helping reply.

Best, Marta


info@zkusto.com pro premium commented 2 months ago

Hi, any solution, I have the same issue.

BR, Vaclav


Grzegorz Bujański staff commented 2 months ago

Hi. Try use config from this topic: https://mdbootstrap.com/support/jquery/latest-version-of-mdb-not-compatible-with-webpack/ This should help


pawel dev answered 2 months ago

Same proble. I wan't to mask overlays but can't find image in my local. https://mdbootstrap.com/docs/jquery/css/masks/


Grzegorz Bujański staff commented 2 months ago

Hi. Can you say something more about it? Did you install our package using NPM or did you unpack the zip file and add it to the project? Do you use any framework, e.g. Laravel?


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: jQuery
  • MDB Version: 4.12.0
  • Device: Macbook Pro 2017
  • Browser: Brave (Chromium based)
  • OS: Mac OS Catalina 10.15.3
  • Provided sample code: No
  • Provided link: No