More than 5 years have passed since last update.

WebPack4 css-loader の画像相対パスで小２時間ハマった

Last updated at 2019-06-05Posted at 2019-04-05

ハマったよ。。background-imageの画像パス

Webpack４でsassをMiniCssExtractPluginを使用してコンパイルしていたら
いきなりのエラー。

Module not found: Error: Can't resolve '../images/bg_slide_sp01.jpg' in '/Users/amn-user/AMN/Alpha/app/src/scss'

なんでじゃ？？

とハマったこと小２時間。

備忘として残すことにした。

sass-loaderのエラーなの？
なんなの？？
とGoogle先生に尋ねた。

困った時のQiitaと並ぶstack overflowに答えがいた！

回答は以下に。

optionのurlがデフォルトではtrueになっているから絶対パスでないとエラーが出てしまう。
相対パスをしようしたかったらurl: falseにしなくちゃならなかった！！

{
   loader: 'css-loader',
      options: {
        url: false,
        sourceMap: true,
        importLoaders: 2
      }
}

これで、解決。