使用SCSS的背景圖片不起作用-`webpackMissingModule`錯誤

Question

我將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並錯誤地解釋了給定的路徑。

我該如何解決？

Answer 1

您需要使其相對於SCSS文件的路徑，而不是相對於HTML文件。