ワシはワシが育てる

週刊少年ジャンプと任天堂のゲームが三度のメシより好きです。

middlemanの画像URLの参照に盛大にハマる

静的サイト生成に大いに貢献してくれるmiddlemanですが、CSSのimage-urlで盛大にハマったのでメモ。

buildする際、assetファイルにhashをつけるとCSSのimage-urlがおかしな場所を参照するという事態に。

// middlemanでの記述
.hoge {
  background: image-url("hoge/hoge.jpg");
}

hashをつけずにbuildすると以下のように正しく参照してくれるのですが

// build時の記述
.hoge {
  background: url("../img/hoge/hoge.jpg");
}

hashをつけるとなぜか一階層下まで遡って読み込まれてしまいました。

.hoge {
  background: url("../../img/hoge/hoge-af98ewhuief.jpg");

ここで「background: url(...)」と記述しているのはフォルダ階層が異なる分割されたファイルで、build時にsprocketsでapplication.cssとして連結される仕組みになっています。

おそらくhashをつけると分割されたファイルからの相対パスで暗号化された画像名を取得していることが原因だと思われます。
不思議なことに以前は同じ状況でbuildしても問題が発生しなかったのですが、なぜか今回だけ階層を正しく読み取ってくれませんでした。

ググっても解決法は見つからず、手当たり次第何でも試しまくったら以下の方法で上手くいきました。

.hoge {
  background: image-url("../img/hoge/hoge.jpg");
}

なぜこの方法だと上手くいくのかよく分かりませんでしたが、解決できたので一件落着とします。