webpack css-loader image paths need to remain relative to stylesheet location

Question

I need all iamges to be relative to the stylesheet local. If I add root=. , which I though prepended to url(/path/) then I need to add a file-loader and the path is wrong anyway.

If I write relative path directly in the CSS then I also need to use a fileloader. If I write non-relative path in CSS then there is no change in CSS paths but images cannot be loaded since they must be relative to the stylesheet location, there is no other way for them to be loaded properly. I also use ExtractTextPlugin to have separate files for CSS but paths are wrong anyway, with or without ExtractTextPlugin.

Answer 1

Figured it out. Needed to add ?name=[path][name].[ext] to the file-loader.

{ test: /\.jpg$/, loader: "file-loader?name=[path][name].[ext]" }