Topic: Installing MDB React Pro and using SCSS files
Russell Teesdale free asked 5 years 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.
lumatl free answered 4 years 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 4 years ago
No, we didn't change anything with SCSS files yet. We are working to make our styles modular in our package.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Free
- Premium support: No
- Technology: MDB React
- MDB Version: 4.23.1
- Device: PC
- Browser: Chrome
- OS: Windows
- Provided sample code: Yes
- Provided link: Yes
Piotr Glejzer staff commented 5 years 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.