My problem is that if I do not specify the full domain in the output.publicPath option; then the URL does not load properly (at least fonts).
My webpack configuration:
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 smaller file that says:
@font-face { font-family: 'new-sources'; src: url('../../fonts/sources-icons-rev-4.eot'); ... }
My server is at http: // localhost: 5000 .
When I check the generated CSS when 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); ... }
What seems right! But does not work. Chrome dev utilities report an error: "Failed to decode the downloaded font: http: // localhost: 5000 / widgets / damian / 9789 / en " Indicating that he tried to download the font that is referenced, but this url is my current location, where i serve html. And I don't know why trying to extract the font from this URL.
If I go to http: // localhost: 5000 / assets / sdk / v1 / fonts / sources-icons-rev-4-fad6f81d012ba56b350abdc714d1fa5a.eot . He works.
Everything is solved when I change publicPath to: ' http: // localhost: 5000 / assets / '. But I want to avoid this, and in any case, I would like to understand why this is happening.
I assume that since the stylish loader adds CSS like Blob, this css has lost the concept of the “current domain”, so URLs that don't have a domain act weirdly.
But at the same time, this should happen to everyone who uses webpack with CSS, and I have not seen any comments about it .: S
Thank!!!