Mc128k Mc128k - 4 months ago 55
AngularJS Question

Webpack: Cannot load CSS with url() imports

Spent one hour trying to solve the problem, still clueless.

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:

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.<anonymous> (/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


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

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


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

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


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

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

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


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
url()
function in the CSS.

Thanks

Answer

Do you use the resolve-url (resolve-url-loader in webpack) ?

I use the following loader for css :

{
      test: /\.css$/,
      loaders: ['style','css?sourceMap!postcss!resolve-url']
    },