PatrickJS-starter: chore(webpack/styles): BUG - Backgrounds Urls not working when loaded by styles or styleUrl

I have it as the PR, example; Relevant part being…

  {
    test: /\.(jpg|png|gif)$/,
    loader: 'file',
  },
  {
    test: /\.css$/,
    loaders: ['to-string-loader', 'css-loader'],
  },

If I change the css rule to;

  {
    test: /\.css$/,
    loader: 'raw-loader'
  },

the error is gone. So at least that shows that it uses my rules. I’m still learning a lot about webpack, so there might be something I am missing. But it is mostly based on angular2-webpack-starter. There are no other rules that collides. Ideas? The error is happening using the vis library.

Another observation is that I did not get any errors if I changed the loader to eg 'file123', so it for sure looks like the rule never hits. Do I need to learn webpack to handle url() in the css files?

👍

Was looking into your issue, @xeor, and found that my fix, doesn’t actually seem to fix anything.

Near as I can tell, the issue went away when I switched to using root-relative background-image url(…)… with some mixup I attributed this to using the file-loader, but so far, it seems that even if I delete these loaders it works, as long as I’m using root-relative URLs.

This relates to css-loader’s root relative URLs feature.

The original issue, then, is still unsolved.

A quick workaround, I guess, is to just use root-relative urls, such as: background-image url(/assets/img/myimg.jpeg)

You need to teach webpack how to handle this file type (*.jpg). Otherwise it’s assumed to be a js module.

loaders: [
//...
{
  test: /\.(jpg|png)$/,
  loader: 'file',
}
]

This uses the webpack/file-loader that copies the referenced assets (the jpg) to the output folder and leaves behind an URL for the browser to load.

I invite you to browse the (long) list of loaders: http://webpack.github.io/docs/list-of-loaders.html It’s quite interesting to see what other loaders are available, like the url-loader that turns the file contents into data: urls.

Github have something called reactions, instead of +1 or thumbsupping issues. Please use it! See https://github.com/blog/2119-add-reactions-to-pull-requests-issues-and-comments

As default, github sends out mail updates to every partipants on new comments. If you want to be one of them, just subscribe (the bottom to the right)!

+1

+1

+1

I’m also experiencing this issue trying to build a project containing a component style CSS file that specifies a background url:

background: url('../assets/img/my-image.jpg') no-repeat;

Not sure if this is relevant, but I’ve seen variations of the error line based on different images.

JPG encoded on Photoshop 3.0 (I guess?): (function (exports, require, module, __filename, __dirname) { ����2�Photoshop 3.0

JPG encoded on my Windows box: (function (exports, require, module, __filename, __dirname) { ����

PNG encoded on my Windows box: (function (exports, require, module, __filename, __dirname) { �PNG

It looks like the image is trying to be parsed as text. It looks like webpack isn’t configured to handle jpg files as a part of its build. (similar issue for css-loader here: https://github.com/webpack/css-loader/issues/1)

I’m looking for a solution, but I’m no WebPack expert - if anyone has any guidance, more than appreciated.

Following the links in this SO post, using css-to-string-loader worked for me in the end (instead of to-string-loader) http://stackoverflow.com/questions/38424488/webpack-css-loader-background-image-error-loading https://www.npmjs.com/package/css-to-string-loader

Without inspect more , i can say that url declaration in css files seems to be parsed as a javacript function while it’s not.