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

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.

About this issue

Original URL
State: closed
Created 10 years ago
Comments: 29 (6 by maintainers)

Most upvoted comments

This still seems to be an issue. Using webpack v1.12.14, css-loader v0.23.1. When sourcemaps are on, background-images will not work. Setting output.publicPath to a full url does nothing to resolve the problem.

+18

mrbinky3000 on Mar 28, 2016

This issue is also failing with fonts as well. They are being declared as they cannot be decoded in chrome or firefox. Oddly it works fine in safari.

nmccready on Jul 30, 2015

I am having issues with this as well, hoping for a solution that doesn’t involve setting an absolute url on publicPath. Webpack is pretty much useless as build tool in your development workflow if you cannot use source maps to understand what styles are needing to be adjusted when viewing an elements styling.

ciasej on Sep 11, 2016

I can confirm that setting output.publicPath to a full url fixed the problem for me. My webpack server is hosted on port 5000, my related chunk of config looks as follows:

output: {
  publicPath: 'http://localhost:5000/',
},
module: {
{
    test: /\.styl$/,
    exclude: /node_modules/,
      loader: 'style!css?sourceMap!stylus?resolve url',
}, {
    test: /\.css/,
    loader: 'style!css?sourceMap',
  }
}

I write Stylus as follows:

// using file-loader explicitly here as I have svg-inline-loader managing .svg files in config
background-image url('~!file!assets/patterns/grey.svg')

It produces following output in generated css:

background-image: url(http://localhost:5000/95d465435d15b4852261c1b7315c90ba.svg);

which is proprely seen and parsed by the browser. This is the only workflow that works for me. Hope this helps someone.

evenfrost on Jun 8, 2016

Right I am using publicPath: 'http://localhost:9999/' but when I inspect the location of the background-image its chrome-devtools://devtools/public/img/ajax-loader.gif. The original path is /public/img/ajax-loader.gif

This only happens when sourcemap is on.

tkiethanom on Sep 18, 2015

Still facing this problem. I dont want to set an absolute URL like http://... So only thing i can do is to remove the sourceMap

liu-dongyu on Sep 8, 2016