Background image with SCSS doesn't work - `webpackMissingModule` error

Question

I use SCSS with Webpack. I have a div I want to fill with background image. When I hardcode it in HTML:

<div class="plus-icon"
  style="background-image: url('graphics/plus-icon.png');">
</div>

everything is ok, but when I try to set it via SCSS like that:

.plus-icon {
  background-image: url('graphics/plus-icon.png');
}

I got such errors:

Uncaught Error: Cannot find module "./graphics/plus-icon.png"
>    webpackMissingModule @

/* ... */

./~/css-loader!./~/sass-loader!./src/stylesheets/main.scss
Module not found: Error: Cannot resolve 'file' or 'directory'
./graphics/plus-icon.png in /home/karol/GitProjects/monterail-test/src/stylesheets
resolve file
/home/karol/GitProjects/monterail-test/src/stylesheets/graphics/plus-icon.png
doesn't exist

/* ... */

As we can see, Webpack tries to load my PNG too early and interprets given path wrongly.

How can I fix it?

Answer 1

您需要使其相对于SCSS文件的路径，而不是相对于HTML文件。