Webpack sass-loader, css-loader breaks with font-face in scss file

Question

This is my loader config for styles:

loaders: {
  test: /\.scss$/,
  loaders: ['style-loader', 'css-loader', 'resolve-url-loader', 'sass-loader']
}

In my source scss file, I have this:

@font-face {
  font-family: 'icomoon';
  src: url('../fonts/icomoon.eot?-cvpazo');
  src: url('../fonts/icomoon.eot?#iefix-cvpazo') format('embedded-opentype'),
       url('../fonts/icomoon.woff?-cvpazo') format('woff'),
       url('../fonts/icomoon.ttf?-cvpazo') format('truetype'),
       url('../fonts/icomoon.svg?-cvpazo#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

I'm getting this error:

Module parse failed: /client/fonts/icomoon.svg?-cvpazo Unexpected token (1:0) You may need an appropriate loader to handle this file type.

Webpack isn't able to load the font-face declaration, what do I need to do here to get the font-face to work?

have you tried using your resolve-url-loader before the sass-loader? I am having a similar issue, and hope you'll find a fix! — bboydflo
I did try that and it did not fix this issue, the resolve-url-loader will handle the paths that are passed to url but it will not fix this problem. It's clear now that the sass-loader and css-loader can't handle @font-face. Which is non-intuitive to me. I think I'm going to have to use a separate font loader. I'll give that a try and report back when I do! — dylanjha

bboydflo bboydflo · Accepted Answer · 2017-01-18T11:45:53

Maybe you need to add file-loader to load fonts

{
    test: /\.woff2?$|\.ttf$|\.eot$|\.svg$/,
    use: ['file-loader']
}

Webpack sass-loader, css-loader breaks with font-face in scss file

1 Answers