使用SCSS的背景图像不起作用 - “webpackMissingModule”错误

Question

我在Webpack中使用SCSS。我有一个div我想填写背景图片。当我用HTML硬编码时：

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

一切正常，但当我尝试通过SCSS设置它时：

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

我遇到了这样的错误：

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

/* ... */

正如我们所看到的，Webpack试图过早加载我的PNG并错误地解释给定的路径。

我该如何解决？

Answer 1

您需要将其设置为相对于SCSS文件的路径，而不是相对于HTML文件。