popupjs | A minimalistic popup library made for designers | User Interface library

I was able to solve the problem myself. In case it could help others in the future, please find the solution below.

1. First of all, if you are using both postcss-loader with the postcss-import plugin, AND css-loader, turn off / delete the postcss-import plugin. You do not need more than one tool that resolves @import rules. This is not really a problem if the order of loaders is correct, but you might as well remove it.
2. In the sass-loader docs, you can read the following:

Since Sass/libsass does not provide url rewriting, all linked assets must be relative to the output.

• If you're just generating CSS without passing it to the css-loader, it must be relative to your web root.

• If you pass the generated CSS on to the css-loader, all urls must be relative to the entry-file (e.g. main.scss).

More likely you will be disrupted by this second issue. It is natural to expect relative references to be resolved against the .scss file in which they are specified (like in regular .css files). Thankfully there are two solutions to this problem:

• Add the missing url rewriting using the resolve-url-loader. Place it before the sass-loader in the loader chain.

• Library authors usually provide a variable to modify the asset path. bootstrap-sass for example has an $icon-font-path. Check out this working bootstrap example.

I decided to follow bullet two, and add in resolve-url-loader above sass-loader in the Webpack config. It now works as expected.

My final Webpack config (for now) looks like this: