sourceMap css does not function for background-image (maybe stylus-loader issue)

[nmccready]

So this issue is bizarre and I hope I can make an example that does this.

I successful got sourceMaps to work with stylus-loader with
{ test: /\.styl$/, loader: 'style!css?sourceMap!stylus' }

However when ?sourceMap is enabled all our background url('whatever/sprite.png') no longer work. When the ?sourceMap is removed all is well.

I will make an example repo when I get the chance. Also let me know if this should be an issue on stylus-loader instead.

As for more info the css produced are identical except that sourcemap css is redirected via @import some url. The computed CSS reported by Chrome Debugger is identical, but using (Chrome Extension) CSSViewer reports different processed CSS. Which shows the missing sprite.

Also this problem exists in Firefox as well so I do not think it is a chrome issue.

[nmccready]

https://chrome.google.com/webstore/detail/cssviewer/ggfgijbpiheegefliciemofobhmofgce

[sokra]

The problem is that DataUrls cannot download resources... (The stylesheet is embedded as DataUrl to append the SourceMap)

As workaround you could include every image as DataUrl (with the url-loader instead of the file-loader)...

I'll try to find a better solution...

[nmccready]

Thank you.

[sokra]

I'll try to find a better solution...

URL.createObjectURL + Blob + sourceMappingURL does work.

[nmccready]

Its been a while; how would this look in the config?

[sokra]

style-loader!css-loader?sourceMap

[timaschew]

we are using stylus-loader and all the url paths are not resolved, if the stylus file was called via another module via ~myModule.

With this settings for the stylus-loader it's working: ?{"resolve url": true}

[kevinrenskers]

I just came across the same issue where background images from css don't work because of the paths, when using sourcemaps, css-loader and file-loader in dev mode with webpack-dev-server.

For now I've simply disabled sourcemaps, but was there a better fix? style-loader!css-loader?sourceMap was mentioned but this is exactly what's breaking for me.

[sokra]

I think a workaround is to use an absolute URL as output.publicPath.