webpackのCSSのbackground-imageのpath問題を解決する

概要

webpackで背景画像を出力する際にパスで詰まってしまったので備忘録メモ

buildした際にパスが書き換わってしまうので、config.jsをいじる必要があるんだけど解決方法がわからず放置してましたが、英語文献を読めば即解決しました。
今思えばすごく簡単だった・・・

以下のように options: { publicPath: '../' },を下記加えればOK

ソース

ディレクトリ構成

/dist
 └css/style.css
 └img/hoge.jpg
/src
 └scss/style.scss
 └img/hoge.jpg

webpack.config.js

      {
        test: /\.(css|scss|sass)$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: { publicPath: '../' },
          },
          {
            loader: 'css-loader',
            options: { sourceMap: true },
          },
          {
            loader: 'sass-loader',
          },
        ],
      },

参考記事