Minify & Bundleが機能しない!?

こんにちは！
ASP.NET MVCにてWebシステムを開発中に直面したお悩みです。

環境は

• IDE：VS2015 pro
• Webサーバー：IIS8.5

今回の悩んだことはデバッグ時には問題ないが、IISへ配置するとjquery uiが働かないということ。dialogメソッドを実行してもダイアログが透過してしまうんですね。あきらかにCSSが効いていない。
そこで配置先のWeb.configを編集してdebugモードを有効にして、Minify & Bundleを無効にしすべてのCSS,JSファイルをダウンロードするようにしました。

<system.web>
　<compilation targetFramework="4.5.2" debug="true"/>
  <httpRuntime targetFramework="4.5.2"/>

△Web.config

debug="true"とすることで、Minify & Bundleが無効になりすべてのファイルがDLされます。ただここで困るのはjsやcssを更新した際にローカルへ反映されない場合ですね。query文字列を付けるのが簡単な対応ですが、せっかくBundle機能があるのでそちらを使ってスマートにしたいですよね。

Minify & Bundleがうまくいっていない原因を調査!!

ブラウザの開発ツールを使ってみると下記エラーが起きていることが判明。

/* 最小化できませんでした。最小化されていないコンテンツを返します。
(17,1): run-time error CSS1019: Unexpected token, found '@import'
(17,9): run-time error CSS1019: Unexpected token, found '"base.css"'
(18,1): run-time error CSS1019: Unexpected token, found '@import'
(18,9): run-time error CSS1019: Unexpected token, found '"theme.css"'
(19,1): run-time error CSS1019: Unexpected token, found '@import'
(19,9): run-time error CSS1019: Unexpected token, found '"jquery-ui.min.css"'
 */

デプロイしているソリューションの「BundleConfig.cs」では「all.css」を通して「base.css」、「theme.css」、「jquery-ui.min.css」をimportしている

bundles.Add(new StyleBundle("~/Content/css").Include(
                      "~/Content/bootstrap.css",
                      "~/Content/themes/base/all.css",                       
                      "~/Content/bootstrap-datepicker.min.css",
                      "~/Content/Site.css"
                      ));

△BundleConfig.cs抜粋

@import "base.css";
@import "theme.css";
@import "jquery-ui.min.css";

△all.css

「base.css」、「theme.css」、「jquery-ui.min.css」をMinify化できないためCSSが適用されていませんでした。

対応したこと

1. CSSを個別にBundle
2. Imageファイルをコピー

1.CSSを個別にBundle

今回のWebアプリのフォルダ構成は以下の通り

theme.cssとjquery-ui.cssをall.cssでImportするのではなく直接Bundoleさせることにしました。

bundles.Add(new StyleBundle("~/Content/css").Include(
                      "~/Content/bootstrap.css",
                      "~/Content/themes/base/theme.css", 
                      "~/Content/themes/base/jquery-ui.css",
                      "~/Content/bootstrap-datepicker.min.css",
                      "~/Content/Site.css"
                      ));

△BundleConfig.csを修正

2.Imageファイルをコピー

直接指定するとImageファイルの階層が変わってきますので「themes」階層にいるイメージファイルを「Content」直下の「Image」フォルダへコピー

△「Content/themes/base/imagesから「Content/Images」へコピー

これでCSSは適用されるし、Minify化されてダウンロードがスリムになるし、CSS、JSの変更がクライアントサイドに適用されるし万々歳です!(^^)!