css-loader parse fail on @font-face

[mattybow]

I get this error when webpack tries to run:

ERROR in ./bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.eot
Module parse failed: 
./bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.eot Line 1: Unexpected token ILLEGAL
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./~/css-loader?importLoaders=1!./bower_components/bootstrap/dist/css/bootstrap.css 2:4480-4532 2:4551-4603

Here's my configuration

 module: {
    loaders: [
      // Pass *.jsx files through jsx-loader transform
      { test: /\.js$/, loaders: ['react-hot','jsx?harmony'] },

      { test: /\.css$/, loader: "style-loader!css-loader?importLoaders=1" }
    ]
  }

Is it something in my config that's wrong or missing something?

[mattybow]

I needed to add url-loader to my config

{ test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' }

[redundantautomata]

@mattybow Thanks for solving it ;)

[Go7hic]

thx

[TonyWang031]

Thanks for the answer @mattybow, it seems better to add a suffix regex to fit more general cases, the following configuration works for me:
{ test: /.(png|woff(2)?|eot|ttf|svg)(?[a-z0-9=.]+)?$/, loader: 'url-loader?limit=100000' }

[TheWaWaR]

Thanks @mattybow

[polinom]

👍

[wpcarro]

I am struggling to add new fonts to my styles. My webpack.config test for fonts is:

...
{
  test: /\.ttf$/,
  loaders: ['url?limit=100000']
},
...

I am unsure of the syntax that I should use to load the font file, and I think that this is the problem. Could anyone share with me a code snippet to illustrate how they have successfully loaded a font? Right now I have the following in my main.scss:

@font-face {
  font-family: testFont;
  src: url("../assets/fonts/Proxima_Nova_Regular.ttf");
  font-weight: bold;
}

But this isn't working for me. Any help would be greatly appreciated!

[cusspvz]

@wpcarro which css-loader version are you using ?

[wpcarro]

@cusspvz:

From the package.json

"css-loader": "^0.23.1",

We ended up getting the fonts to load using file-loader in lieu of url-loader. To be completely honest, I'm unsure of the nuances between the two loaders. I also ended up switching the order in which the loaders were applied, which I think ultimately did the trick.

When I was experiencing trouble, Webpack was processing the font files before processing the Sass files. I rearranged this so that the order went:

json --> photos --> Sass --> audio --> fonts --> JS

Either way, the process was a little bit similar to shooting in the dark, but it's working now.

[cusspvz]

To be completely honest, I'm unsure of the nuances between the two loaders.

file-loader grabs the file and handle its writing on build (you could specify saved path/name.extension, and other nice features it has).
url-loader tries to load up file data inline by using blob style url loading, but it would do it only if a file size is under the limitspecified, otherwise it will fallback and use file-loader instead.

URL loader is indicated to be used on images and other small resources you could have.

I also ended up switching the order in which the loaders were applied, which I think ultimately did the trick.

Loaders order definition is important because they pipe the content over them.
Here are some examples so you can understand how it works under the hood:

**JS CONTENT ** < Loader D < Loader C < Loader B < Loader A < **File**

file-loader example

"public/path/to/image.thumbnail.png" (module exported string) < file-loader?name=[name].thumbnail.[ext] (saves file on folder and exports path) < gm-loader (handle resizing, exports thumbnailed file) < Original File (buffer with its content)

[wpcarro]

@cusspvz thanks for the detailed explanation and overview!