Webpack: Must i specify the domain in publicPath for url() directive to work in CSS?

Question

My problem is that if I don't specify the complete domain in output.publicPath config option; then the url don't load properly (at least fonts).

My webpack config:

output: {
  ...
  publicPath: '/assets/'
},
module: { 
  loaders: {
    { 
      test: /\.less$/, 
      loader: "style!css?sourceMap!less?sourceMap" 
    },
    { 
      test: /\.(png|jpg|svg|gif|eot|woff|ttf)$/, 
      loader: 'file-loader?name=[path][name]-[hash].[ext]'
    }
  }
},
debug: true,
devtool: 'eval'

I have a less file that states:

@font-face {
  font-family: 'new-sources';
  src: url('../../fonts/sources-icons-rev-4.eot');
  ...
}

My server is in http://localhost:5000.

When i check the generated CSS while debugging in chrome I see that it has been replaced by:

@font-face {
  font-family: 'new-sources';
  src: url(/assets/sdk/v1/fonts/sources-icons-rev-4-fad6f81d012ba56b350abdc714d1fa5a.eot);
  ...
}

Which seems correct! But doesn't work Chrome dev tools report an error: "Failed to decode downloaded font: http://localhost:5000/widgets/damian/9789/en" Indicating that it tried to load a font that url, but that url is my current location, where i'm serving the html. And i don't know why is trying to fetch the font from that url.

If I go to: http://localhost:5000/assets/sdk/v1/fonts/sources-icons-rev-4-fad6f81d012ba56b350abdc714d1fa5a.eot. It works.

Everything is solved when I change the publicPath to: 'http://localhost:5000/assets/'. But that's something I want to avoid, and in any case i would like to understand why this happens.

My guess, is that since the style-loader, add the CSS as a Blob, that css losses the concept of 'current domain' so urls that don't have a domain in it, act strange.

But at the same time, this should be happening to everybody that uses webpack with CSS, and i haven't seen any comment about it. :S

Thanks!!!

Answer 1

Found it. Thanks to @diunarlist on webpack's gitter.

It's because i was using sourceMap with style-loader. Check https://github.com/webpack/style-loader/issues/55

With source-maps, style loader uses a Blob, so it requires absolute urls to work.

Without source-maps it uses an inline style tag, so there is no problem.