Webpack: Cannot load CSS with url() imports

Question

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

Galhem · Accepted Answer · 2016-08-05 08:47:59Z

6

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

answered Aug 5, 2016 at 8:47

Galhem

2051 silver badge11 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

John White Over a year ago

[deleted, searching more info before asking again]

Galhem Over a year ago

Have you npm install resolve-url-loader ? Also take a look to github.com/webpack/css-loader .

John White Over a year ago

Ok, solved by installing resolve-url resolve-url-loader, then changing the CSS line to loaders: ['style', 'css', 'resolve-url'] and tweaking the image loader regex (it wasn't loading the ?stuff=v0.3.2 part) /\.(ttf|gif|svg|png)(\?[a-z0-9\=\.]+)?$/,. Now the compiler works and the browser throws an error about 'styles to be an array of strings'. Will update here if I find a solution.

John White Over a year ago

Update: Something conflicts with Angular's styleUrls definition, when it's used it spits out the error Expected 'styles' to be an array of strings. This is because the pipeline included to-string, but now it won't work anymore. Just apply the following loader pipeline for css: loaders: ['exports-loader?module.exports.toString()', 'style', 'css', 'resolve-url'], thanks to this stackoverflow question.

Collectives™ on Stack Overflow

Webpack: Cannot load CSS with url() imports

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related