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

maissani commented 8 years ago

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

xeor commented 8 years ago

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.

martaver commented 8 years ago

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.

maissani commented 8 years ago

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

slissner commented 8 years ago

+1

LogiDesignTech commented 8 years ago

+1

pixeltana commented 8 years ago

+1

j4in commented 8 years ago

👍

xeor commented 8 years ago

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

Tragetaschen commented 8 years ago

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.

martaver commented 8 years ago

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 https://github.com/AngularClass/angular2-webpack-starter/pull/830 that adds the loader to webpack.common.js.

maissani commented 8 years ago

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

martaver commented 8 years ago

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 https://github.com/AngularClass/angular2-webpack-starter/issues/759#issuecomment-238192974, or mute the thread https://github.com/notifications/unsubscribe-auth/AF1wMrDHABPuDBgw9n-jQRVBvw1568V_ks5qdv4tgaJpZM4JGHuo .

xeor commented 8 years ago

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?

martaver commented 8 years ago

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 https://github.com/AngularClass/angular2-webpack-starter/issues/759#issuecomment-239583254, or mute the thread https://github.com/notifications/unsubscribe-auth/AF1wMivWcJe_NJHqa4FtAuKHw1Fp4wMPks5qfQE1gaJpZM4JGHuo .

xeor commented 8 years ago

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?

martaver commented 8 years ago

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)

zxx714 commented 8 years ago

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

hopefulwalker commented 8 years ago

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: https://github.com/gajus/to-string-loader/issues/2

13k commented 8 years ago

looks like this is related: https://github.com/webpack/style-loader/issues/55

NagRock commented 8 years ago

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

sparachi commented 8 years ago

@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

thescientist13 commented 8 years ago

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

thescientist13 commented 8 years ago

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

PatrickJS / PatrickJS-starter

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