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

I'm submitting a ...
[x] bug report
[ ] feature request
[ ] question about the decisions made in the repository
Do you want to request a feature or report a bug?

Report a Bug

What is the current behavior?

The current behavior is when you try to add a bacground url into a css that is loaded by styles or styleUrl it return the following error :

ERROR in ./src/app/home/home.style.css
Module build failed: /home/hosting/example.com/alpha/src/assets/img/light-blue-background.jpg:1
(function (exports, require, module, __filename, __dirname) { ����
                                                              ^
SyntaxError: Unexpected token ILLEGAL
    at Object.exports.runInThisContext (vm.js:53: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/hosting/example.com/alpha/src/app/home/home.style.css:6:313)
    at Module._compile (module.js:541:32)
    at Object.loaderContext.exec (/home/hosting/example.com/alpha/node_modules/webpack-core/lib/NormalModuleMixin.js:88:7)
    at Object.module.exports (/home/hosting/example.com/alpha/node_modules/to-string-loader/src/to-string.js:6:54)
 @ ./src/app/home/home.component.ts 41:21-48

The following lines triger the bug


.showcase-img{
    background: url(../../assets/img/light-blue-background.jpg) no-repeat 50% 50%; #doesn't works with and without quotes doubles quotes etc....
    background-size: cover;
    width: 100%;
    height: 500px;
    text-shadow: 2px 2px 2px black;
}

Tested on Linux & Windows

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via
https://plnkr.co or similar (you can use this template as a starting point: http://plnkr.co/edit/tpl:AvJOMERrnz94ekVua0u5).

No need to push a plunker => Just get the last angular webpack starter (with the material branch or not) and try to use one background url on any css files that are loaded by styles or styleUrl

What is the expected behavior?

No error and the background image displayed on and bacground url working

What is the motivation / use case for changing the behavior?

This break the common use of angular

Please tell us about your environment:
Angular version: 2.0.0-rc.3
Browser: all
Other information (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. stackoverflow, gitter, etc)

I think in webpack.comon.js
in css, it misss resolve-url-loader

I have almost the exact problem when using 'to-string-loader', 'css-loader' in webpack.
Looks like this is a problem with all (most) files css loads using url..
I am using rc.4.

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: webpack/css-loader#1)

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

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

+1

👍

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)!

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.

@Tragetaschen

headbang

Thanks @Tragetaschen... You know what? I tried the file-loader and it failed because I set my loader to file-loader, with the '-loader' suffix like all the other loaders. I didn't notice it's actually just file.

Have just confirmed that this solves the issue:.

I've submitted a pull request #830 that adds the loader to webpack.common.js.

feat: Added use of file-loader for jpg/png/gif files

@martaver

@martaver Did you miss svg format in your pull request ?

@martaver

I didn't think of it to be honest. I can add it and send another PR easily
enough.

Any other formats you think would be good to add and handle as files?

On Mon, Aug 8, 2016 at 1:00 PM Mehdi Aïssani notifications@github.com
wrote:

@martaver https://github.com/Martaver Did you miss svg format in your
pull request ?

—
You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub
#759 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AF1wMrDHABPuDBgw9n-jQRVBvw1568V_ks5qdv4tgaJpZM4JGHuo
.

Just to get this right; after adding the file, loader, css files with entries like background: url('img/timeline/delete.png') no-repeat center; should not give a message like this;

ERROR in ./~/vis/dist/vis.css
Module build failed: /.../node_modules/vis/dist/img/timeline/delete.png:1
(function (exports, require, module, __filename, __dirname) { �PNG
^
SyntaxError: Unexpected token ILLEGAL

right?

I added the file loader as works above, but I am still getting this error.. Anyone else?

Looks like ur loader is being ignored. How did u add it, can u show us the
code?

Also, check out the associated PR for a working example.
On Sat, 13 Aug 2016 at 02:26, Lars Solberg notifications@github.com wrote:

Just to get this right; after adding the file, loader, css files with
entries like background: url('img/timeline/delete.png') no-repeat center;
should not give a message like this;

ERROR in ./~/vis/dist/vis.css
Module build failed: /.../node_modules/vis/dist/img/timeline/delete.png:1
(function (exports, require, module, __filename, __dirname) { �PNG
^
SyntaxError: Unexpected token ILLEGAL

right?

I added the file loader as works above, but I am still getting this
error.. Anyone else?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#759 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AF1wMivWcJe_NJHqa4FtAuKHw1Fp4wMPks5qfQE1gaJpZM4JGHuo
.

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?

@xeor

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)

http://stackoverflow.com/questions/37402003/webpack-url-and-file-loaders-dont-working-on-angular-2-required-component-style
According to this page, exports-loader can solve this problem:

{
        test: /\.css$/,
        loaders: ['exports-loader?module.exports.toString()', 'css-loader']
}

This is also happening to. I tried different loader for this. and finally I think there is something wrong with to-string-loader. (raw, style and so on..)
When I check the issues of to-string-loader, I got this:
gajus/to-string-loader#2

looks like this is related: webpack/style-loader#55

@martaver

@martaver thx! Workaround with /full/path/file.png works!

@martaver

@martaver your workaround caused the error to go away but it did not load the background image. Any help would be appreciated.

@zxx714 this did not work

@martaver

@martaver
This worked for me when running a development build, but not a production build.

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

feat: Added use of file-loader for jpg/png/gif files

Navigation Menu

Repository navigation

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

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

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

Description

Activity

xeor commented on Jul 7, 2016

martaver commented on Jul 20, 2016

maissani commented on Jul 20, 2016

slissner commented on Jul 29, 2016

LogiDesignTech commented on Jul 29, 2016

pixeltana commented on Aug 1, 2016

j4in commented on Aug 1, 2016

xeor commented on Aug 1, 2016

Tragetaschen commented on Aug 1, 2016

martaver commented on Aug 4, 2016

maissani commented on Aug 8, 2016

martaver commented on Aug 9, 2016

xeor commented on Aug 12, 2016

martaver commented on Aug 13, 2016

xeor commented on Aug 13, 2016

martaver commented on Aug 22, 2016

zxx714 commented on Aug 25, 2016

hopefulwalker commented on Aug 29, 2016

13k commented on Aug 30, 2016

NagRock commented on Sep 6, 2016

sparachi commented on Sep 20, 2016

thescientist13 commented on Sep 28, 2016

thescientist13 commented on Sep 30, 2016

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions