ASP.NET MVC4 で css の自動縮小をすると css に記載した画像が読み込まれなくなることがある

例えば以下のような構成の場合。

Content 
|
| jquery.mobile-1.1.1.css 
| 
+---images 
| 　　　　ajax-loader.gif

BundleMobileConfigに以下のように定義されています。

 bundles.Add(new StyleBundle("~/Content/jquerymobile/css").Include("~/Content/jquery.mobile-{version}.css"))

上記 css には以下のように定義されている。

url(images/ajax-loader.gif)

するとデバッグ時は良いがBundleTable.EnableOptimizations = trueを指定して縮小させると画像のURLが以下のようになり読み込めないとエラーになる。

http://localhost:1509/Content/jquerymobile/images/ajax-loader.gif

理由はBundleの定義でjquerymobileをフォルダのように記載してしまっているため、cssのURLが以下のようになるから。

http://localhost:1509/Content/jquerymobile/css?v=pFGS97cnbEIzXqbDbNmSv2vLBmv9zHVSGkyxN7zB0Qc1

解決策は / ではなく . にすればよい。

 bundles.Add(new StyleBundle("~/Content/jquerymobile.css").Include("~/Content/jquery.mobile-{version}.css"))

このように BundleCollection に css を加えるときは勝手にフォルダを追加しないようにすること

ちなみに自動縮小っていうのは、ASP.NET MVC4 の新機能で javascript と css の改行コードを削って容量を小さくしてくれる機能です。普段のデバッグ時は無効になっていて、有効になる条件は２つ

Web.config の compilation 要素が false の場合
Global.asax の Application_Start() で BundleTable.EnableOptimizations = true と設定した時

デバッグ時に無効になっているので、IIS にいざデプロイした時に「あれ画像が表示されねー」って悩むかもしれません。

上記の例で上げたのは jQuery.Mobile.MVC という割とメジャーな NuGet パッケージを使用すると発生する問題なので修正したいんですが、CodePlex や github 見てもプロジェクトが見つからないのでメモ書きするぐらいしか無いという状況。

世界のやまさ