Need way to correct relative paths to url() assets in CSS file.

[craighutch]

If publicPath is "dist/", both the CSS entry file and assets will be placed in the "dist/" folder, but the CSS file will contain markup with relative paths such as this:

div {
  background-image: url("dist/assets/bg.jpg");
}

Such assets are relative to the CSS file itself, not to the document's <base href/>, so the browser will try to fetch "dist/dist/assets/bg.jpg", which returns a 404 because it's an invalid path.

Need a way to adjust these paths to be relative to the generated CSS file.

[tomachristian]

Hey @kb3eua,

css-entry-webpack-plugin does nothing to affect the emitted paths. This has to do with how you configured webpack and/or css-loader.

[craighutch]

@tomachristian I'm currently using extract-text-webpack-plugin and I'm getting around the issue by supplying the plugin with a new "publicPath" like so:

{ test: /\.s[ac]ss$/, use: extractCSS.extract({ publicPath: '', use: [...] }) }

I see that css-entry-webpack-plugin has a dependency on extract-text-webpack-plugin, so mabye an option can be added to pass this setting down?

[tomachristian]

@kb3eua I now understand what you are referring to, pardon my previous misunderstanding.

Indeed css-entry-webpack-plugin is using extract-text-webpack-plugin under the covers, but it's a bit tricky to forward such an option like publicPath to the underlying extract-text-webpack-plugin as that option is per loader, not per ExtractTextPlugin instance.

Before going any further and trying to find a solution for this scenario, would you be so kind and try to use the publicPath option of your configured file-loader? (I assume you are using file-loader)
https://github.com/webpack-contrib/file-loader

If this does not fix your issue, I will try and find a solution for integration into CssEntryPlugin.

[craighutch]

@tomachristian I am using file-loader for my assets, but the problem with that becomes how do I identify which assets are only being referenced from within my CSS and which are referenced from within my HTML? Because only those referenced from CSS need a different publicPath, and conceivably the same asset could be used in both file types.