带有 SCSS 的背景图像不起作用 - `webpackMissingModule` 错误答案

【问题标题】：Background image with SCSS doesn't work - `webpackMissingModule` error带有 SCSS 的背景图像不起作用 - `webpackMissingModule` 错误
【发布时间】：2017-06-27 13:23:24
【问题描述】：

我将 SCSS 与 Webpack 一起使用。我有一个要填充背景图像的 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 并错误地解释了给定的路径。

我该如何解决？

【问题讨论】：

你见过这个解决方案吗：？ stackoverflow.com/questions/38834508/…
谢谢 - 但这并不能解决我的问题。我不想在编译时链接到我的图片，只是让它像 CSS 解释一样，效果很好。
当我将我的图标副本添加到位置stylesheets/graphics/plus-icon.png 时，我在解释过程中遇到了另一个奇怪的错误：ERROR in ./src/stylesheets/graphics/plus-icon.png Module parse failed: /home/karol/GitProjects/monterail-test/src/stylesheets/graphics/plus-icon.png Unexpected character '�' (1:0) You may need an appropriate loader to handle this file type. SyntaxError: Unexpected character '�' (1:0)

标签： html css sass webpack background-image

【解决方案1】：

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

【讨论】：

一个小例子可能会有所帮助。