読者です 読者をやめる 読者になる 読者になる

世界のやまさ

SEKAI NO YAMASA

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 の新機能で javascriptcss の改行コードを削って容量を小さくしてくれる機能です。普段のデバッグ時は無効になっていて、有効になる条件は2つ
  1. Web.config の compilation 要素が false の場合
  2. Global.asax の Application_Start() で BundleTable.EnableOptimizations = true と設定した時

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

 

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