Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: SCSS compiling with webpack failed

NathanDePachtere pro asked 5 years ago


Expected behavior Be able to use the .scss file in order to access variables inside my style.scss. I'm using Webpack in order to build all my stylesheet files.

Actual behavior

Build fails with this error : enter image description here

Resources (screenshots, code snippets etc.) I'm just importing mdb-pro scss files in my main file :

@import '~bootstrap';

@import '~@fortawesome/fontawesome-pro/scss/fontawesome';

...

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

@import "helper/texte";

@import "helper/block";

@import './layout/body';

@import './layout/header';

@import './layout/footer';


NathanDePachtere pro answered 5 years ago


Hi @Grzegorz Bujański

I fixed it by putting this line in my .scss file and removing the loader.

$roboto-font-path: "~mdbootstrap-pro/font/roboto/";

$image-path: "~mdbootstrap-pro/img/";

@import '~mdbootstrap-pro/scss/mdb-pro';`

Cheers!


Grzegorz Bujański staff commented 5 years ago

I'm glad you were able to solve the problem. Regards!


NathanDePachtere pro answered 5 years ago


Hello @Grzegorz Bujański,

I set webpack encore with your config but still the same error. enter image description here

  • I check the installation folder inside node_modules and the font is there.
  • Everything is working when I'm using .css -> but that not helpfull ... just saying that nothing is broken when there isn't compiling process from scss.

Grzegorz Bujański staff answered 5 years ago


Hi. You need file-loader and add some config for fonts. Try use this:

{
  test: /\.(eot|otf|webp|ttf|woff|woff2)(\?.*)?$/,
    use: {
      loader: 'file-loader',
      options: {
        name: '[path][name].[ext]',
      }
    }
 }


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.11.0
  • Device: MacBook Pro
  • Browser: Chrome
  • OS: macOS Catalina
  • Provided sample code: No
  • Provided link: No