SCSSのバックグラウンドイメージが動作しない - `webpackMissingModule`エラー

Question

WebpackでSCSSを使用しています。私は背景の画像でいっぱいにしたいdivを持っています。私はHTMLでそれをハードコーディングする場合：

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

すべてがOKですが、私はそのようにSCSSを経由して、それを設定しようとすると：

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 

/* ... */ 

として：私はこのようなエラーを得た

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

Webpackは私のPNGをあまりにも早くロードしようとし、与えられたパスを間違って解釈しようとします。

どうすれば修正できますか？

Answer 1

HTMLファイルに対してではなく、SCSSファイルのパスを基準にして作成する必要があります。