Webpack: Cannot load CSS with url() imports
<p>Spent one hour trying to solve the problem, still clueless.</p>

<p>I am using Webpack to build an Angular 2 app, and I'm trying to import some CSS files from PrimeUI. Unfortunately when building it spits out this message:</p>

<pre><code>ERROR in ./~/primeui/themes/omega/theme.css
Module build failed: /home/mc128k/node/angular2-webpack-starter/node_modules/primeui/themes/omega/fonts/roboto-v15-latin-regular.eot:1
(function (exports, require, module, __filename, __dirname) { c?

SyntaxError: Unexpected token ILLEGAL
    at Object.exports.runInThisContext (vm.js:76:16)
    at Module._compile (module.js:513:28)
    at Object.Module._extensions..js (module.js:550:10)
    at Module.load (module.js:458:32)
    at tryModuleLoad (module.js:417:12)
    at Function.Module._load (module.js:409:3)
    at Module.require (module.js:468:17)
    at require (internal/module.js:20:19)
    at Object.&lt;anonymous&gt; (/home/mc128k/node/angular2-webpack-starter/node_modules/primeui/themes/omega/theme.css:6:156)
    at Module._compile (module.js:541:32)
    at Object.loaderContext.exec (/home/mc128k/node/angular2-webpack-starter/node_modules/webpack-core/lib/NormalModuleMixin.js:88:7)
    at Object.module.exports (/home/mc128k/node/angular2-webpack-starter/node_modules/to-string-loader/src/to-string.js:6:54)
 @ ./src/main.browser.ts 2:0-41
</code></pre>

<p>So what happens here? The CSS gets parsed correctly by the style loader defined in the webpack configuration:</p>

<pre><code>{
    test: /\.css$/,
    loaders: ['to-string-loader', 'css-loader']
},
</code></pre>

<p>If I try to remove this snippet a lot of errors get generated, so this works. But if the CSS imports stuff like this:</p>

<pre><code>src: url('fonts/roboto-v15-latin-regular.eot');
</code></pre>

<p>Then the compilation fails. It looks like webpack is trying to parse the font. Happens with every other file, like woff and gif images.</p>

<p>Apparently the other loaders get ignored, but it's weird because they look correct (and I tried copy-pasting lots of snippets here).</p>

<pre><code>  {
    test: /\.(ttf|gif|svg)(\?[a-z0-9]+)?$/,
    loader: 'file-loader'
  },
  {
    test: /\.(eot)(\?[a-z0-9]+)?$/,
    loader: 'file-loader'
  },
</code></pre>

<p>So... I'm lost. Tried studying the docs, checking other answers and so on, but I still don't get why webpack doesn't match a loader when seeing the <code>url()</code> function in the CSS. </p>

<p>Thanks</p>