css等で同じファイル名（別ディレクトリ）の画像のimport等が正常に行われないバグについて

[ShellyCWJP]

cssで、url() を利用しての画像import等を行ったとき、例えば以下の構成の時、1個目のファイルのみが取り込まれるバグが発生します。

• public/assets/images/hoge/bg.jpg
• public/assets/images/fuga/bg.jpg

.hoge {
  background-image: url(/public/assets/images/hoge/bg.jpg);
}
.fuga {
  background-image: url(/public/assets/images/fuga/bg.jpg);
}

以下のようなcssが吐かれ、dist/ にも hoge/bg.jpg しか吐かれません。

.hoge {
  background-image: url(/assets/images/hoge/bg.jpg);
}
.fuga {
  background-image: url(/assets/images/hoge/bg.jpg);
}

ファイル名が異なればこの問題は発生しませんでした。 私のほうで原因を調べてみましたが力及ばず、issueを立ち上げさせていただきました。

恐れ入りますが、お手すきの際にご確認をお願いいたします。

[qrac]

ご指摘ありがとうございます！上記ケースに対処するために本体を改修しましたので、まずはバージョン 1.2.0 にアップデートをお願いします。その上で、私の想定した解決法を使ってみてください。

---

まず、ShellyCWJPさんの使いたい画像は public ディレクトリ配下にありますね？（※違う場合は解決方法が異なりますので、別途ご案内します）

public の画像はサイトのルート / に自動コピーされますので、この画像を使うために上記例のCSSを以下のように修正します。/public を削る形になります。

.hoge {
  background-image: url(/assets/images/hoge/bg.jpg);
}
.fuga {
  background-image: url(/assets/images/fuga/bg.jpg);
}

次に package.json と同じ場所に webpack.config.js がなければ作成ください。作成できたら以下のコードを追加します。すでに他の記述をされている場合は追加する形になります。

const webpackConfig = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: "css-loader",
            options: {
              url: false,
            },
          },
        ],
      },
    ],
  },
}

module.exports = webpackConfig

以上で、ビルドやdevサーバー立ち上げを行うと上手くいくはずです。私が試したコードとスクリーンショットは以下となります。

• https://github.com/qrac/minista-v1-example-bg-images

[ShellyCWJP]

迅速にご対応いただいたにも関わらず、確認が遅れまして大変すいません。 v1.2.0にアップデートの上、ご指摘の通りの対応をしたことでdev, build共に正常にimportできたことが確認できました！ 期待していたとおりの完璧な挙動でした！

こんな素晴らしい開発をしてくださってる上に、若輩者の一声のために手を入れてくださり感謝の言葉もありません。 本issueはcloseさせていただきますが、引き続きよろしくお願いいたします！