Installing MDB React Pro and using SCSS files

web
mobile

Topic: Installing MDB React Pro and using SCSS files

jimgroome pro asked 4 months ago

Expected behavior

Copy asset files as described here and run my site as expected.

Actual behavior

Copy asset files as described here and build throws lots of errors, unable to find fonts and images.

Fix

In index.js, instead of importing mdb.scss, you have to import mdb-pro.scss:

import "./assets/scss/mdb-pro.scss";

In assets/scss/core/_masks.scss, replace line 75:

background: url("#{$image-path}/overlays/#{$filename}.png");

With this:

background: url("../#{$image-path}/overlays/#{$filename}.png");

In assets/scss/core/_variables.scss, replace line 173:

$image-path: "../../img" !default;

With this:

$image-path: "../img" !default;

And replace lines 323 and 324:

$carousel-control-prev-icon: url(#{$image-path}/svg/arrow_left.svg) !default;
$carousel-control-next-icon: url(#{$image-path}/svg/arrow_right.svg) !default;

With this:

$carousel-control-prev-icon: url(../#{$image-path}/svg/arrow\_left.svg) !default;
$carousel-control-next-icon: url(../#{$image-path}/svg/arrow\_right.svg) !default;

Finally, in assets/scss/pro/_variables.scss, replace lines 546 to 548:

$pswp\_\_button-background: url(#{$image-path}/lightbox/default-skin.png) !default;
$pswp\_\_button-background-image: url(#{$image-path}/lightbox/default-skin.svg) !default;
$pswp\_\_preloader\_\_icn-background: url(#{$image-path}/lightbox/preloader.gif) !default;

With this:

$pswp\_\_button-background: url(../../../#{$image-path}/lightbox/default-skin.png) !default;
$pswp\_\_button-background-image: url(../../../#{$image-path}/lightbox/default-skin.svg) !default;
$pswp\_\_preloader\_\_icn-background: url(../../../#{$image-path}/lightbox/preloader.gif) !default;

As far as I can tell, this isn't covered in any documentation and left me a bit lost. I'm putting my fixes here in case anybody else encounters the same issue.


Piotr Glejzer staff commented 4 months ago

Thanks for this post. Yes, you are right. There is a problem with scss because we are using scss from jQuery to keep cohesion but they changed scss and we forgot to update our docs about that. Sorry about this. Have a nice day.


lumatl pro answered 3 months ago

Hi @Piotr Glejzer,

Are you planning to make fixes or do you have some guide to follow? I have checked also JQuery Pro version but there is the same problem with the scss.

Cheers, Lukas


Piotr Glejzer staff commented 3 months ago

No, we didn't change anything with SCSS files yet. We are working to make our styles modular in our package.


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: React
  • MDB Version: 4.23.1
  • Device: PC
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: Yes