sassの画像の読み取りのpathについて

概要

以下のようなファイルの構成とする。

.
├── image
│ ├── img.jpg
└── scss
├── base
│ ├── _base.scss
│ └── _status.scss
├── component
│ ├── header.scss
│ └── top-img.scss
└── style.scss

ここでtop-img.scssからimg.jpgを読み取りたいので以下のように記述したところwebpackでエラーが発生してしまった。

top-img.scss

.top {
    background: url("../../image/mv.jpg");
}

理由としてはstyle.scssで以下のようにtop-img.scssをインポートしたためである。

style.scss

@import "./component/top-img";

つまり最終的にインポートした場所からのパスになるのである。
つまり以下のように記述することがで動かすことができた。

top-img.scss

.top {
    background: url("../image/mv.jpg");
}