SCSS compiling with webpack failed

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';

Add comment

Grzegorz Bujański staff answered 5 years ago

0 0 Best answer

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]',
      }
    }
 }

Add comment

NathanDePachtere pro answered 5 years ago

0 0 Best answer

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.

Add comment

NathanDePachtere pro answered 5 years ago

0 0 Best answer

Hi @Grzegorz Bujański

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