Webpack and Sass correctly handle background: url (), but then it was not found when used with webpack-dev-server

Question

I am using Webpack 2 and the webpack-dev server along with the Sass bootloader, the actual configuration:

{ test: /\.scss/, loaders: [ "style", { loader: "css", query: { modules: false, sourceMap: true } }, { loader: "resolve-url" }, { loader: "sass", query: { sourceMap: true } } ] } 

This works very well, and the image specified in background: url() is processed by webpack and also replaced in the style for something like background-somehash.jpg , this file can be accessed by typing http://localhost:8080/background-somehash.jpg . It also works when I provide the whole url (including localhost) in the style background definition using developer tools ...

The only thing that doesn't work is the original css created by webpack, which looks like background: url(background-somehash.jpg) . I also tried various URLs like ./ , ../ , ../../ or ./images/ to check if root was installed somehow differently. I do not understand that the file is easily accessible in the root ...

EDIT: When used with extract-text-webpack-plugin , which extracts styles into a separate real styles.css file, it works fine. The question is why this does not work when the last css is served from a javascript package?

CLARIFICATION: Everything is correctly indicated, the image is available, everything works when I extract css to a separate file using extract-text-webpack-plugin , it just does not work when completely the same css is served from bundle.js , which then refers to index.html for example <link href="blob:..." rel="stylesheet">

Answer 1

Things you should check out:

Is the link image recognized by webpack?

Just delete the image and see if the webpack build works. If so, this is not a problem with your bootloader configuration.

Check the requested URL using browser developer tools

If the request is completed using 404:

• Make sure output.publicPath (webpack) / contentBase (webpack-dev-server) points to the same place. This is from the point of view of the browser (= no absolute paths to the file)

• If you use the <base> -tag, you need to make sure that it correctly replaces the base URL.