Installing MDB React Pro and using SCSS files

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.