Unable to resolve absolute url() paths for background images in CSS with Webpack

Question

I have the following Webpack config (roughly, it has been simplified for this post):

const rootPublic = path.resolve(\'./public\');
const LOCAL_IDENT_NAME = \'lo         


        

Answer 1

With webpack 2:

In your .scss files use ~ before the path.

.yourClass {
      background: url('~img/wallpaper.png');
}

Make use of the resolve root from webpack, add this to your webpack.config.js:

resolve: {
        modules: [
            path.resolve(root),
            'node_modules'
        ]
    },

It should work also for the @import, eg @import "~otherfile.scss"