ここでのアドバイスと1つまたは2つのオンザフライ修正に基づいて、MVC4アプリケーションをホスティングプロバイダーにbinデプロイしましたが、最もすぐに明らかな問題は、cssのバンドルが機能しないことです。バンドル参照を明示的なファイル参照に置き換えると、cssが再び機能します。
VS2012の標準MVC4RTMプロジェクトテンプレートを使用しています。プロバイダーはIIS7.5とASP.NET4を実行しており、同じアプリの以前のMVC3バージョンは正常に機能しました。バージョンが低すぎる場所で依存関係を取得したと推測しています。これは、エリアベースのアクションリンクの問題の原因にもなっている可能性があります。
技術的な症状は次のとおりです。
線は次の@Styles.Render("~/Content/css")ようにレンダリングされます<link href="/Content/css?v=" rel="stylesheet"/>
2013年11月4日更新：
これが発生する理由は、バンドル名の末尾に.jsまたは.cssが含まれているため、ASP.NETがMVCおよびBundleModuleを介して要求を実行しないためです。
パフォーマンスを向上させるためにこれを修正するための推奨される方法は、バンドル名から.jsまたは.cssを削除することです。
したがって、/ bundle/ myscripts.jsは/bundle/myscriptsになります
または、 system.webServerセクションでweb.configを変更して、BundleModuleを介してこれらのリクエストを実行することもできます（これは私の最初の答えでした）
<modules runAllManagedModulesForAllRequests="true">
<remove name="BundleModule" />
<add name="BundleModule" type="System.Web.Optimization.BundleModule" />
</modules>
編集：名前が「css」（ドットなし）で終わっている場合、それも問題であることに気づきました。問題を解決するには、バンドル名を「DataTablesCSS」から「DataTablesStyles」に変更する必要がありました。
CSSとスクリプトのバンドルは、.NETが4.0または4.5を実行しているかどうかに関係なく機能するはずです。私は.NET4.0を実行していますが、問題なく動作します。ただし、ミニファイとバンドリングの動作を機能させるには、web.configをデバッグモードで実行しないように設定する必要があります。
<compilation debug="false" targetFramework="4.0">
_Layout.cshtmlファイルのjQueryUIの例のこのバンドルを取り上げます。
@Styles.Render("~/Content/themes/base/css")
で実行するとdebug="true"、次のHTMLが表示されます。
<link href="/Content/themes/base/jquery.ui.core.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.resizable.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.selectable.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.accordion.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.autocomplete.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.button.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.dialog.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.slider.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.tabs.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.datepicker.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.progressbar.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.theme.css" rel="stylesheet"/>
しかし、私がで実行した場合debug="false"。代わりにこれを取得します。
<link href="/Content/themes/base/css?v=myqT7npwmF2ABsuSaHqt8SCvK8UFWpRv7T4M8r3kiK01" rel="stylesheet"/>
これは、スクリプトファイルとCSSファイルの問題を簡単にデバッグできる機能です。MVC4RTMを使用しています。
MVC依存関係の問題である可能性があると思われる場合は、Nugetにアクセスして、MVC関連のすべてのパッケージを削除してから、Microsoft.AspNet.Mvcパッケージを検索してインストールすることをお勧めします。最新バージョンを使用していますが、v.4.0.20710.0としてリリースされます。それはあなたが必要とするすべての依存関係をつかむはずです。
また、以前はMVC3を使用していて、現在MVC4を使用しようとしている場合は、web.configにアクセスして、MVCの4.0バージョンを指すように参照を更新する必要があります。よくわからない場合は、いつでも新しいMVC4アプリを作成し、そこからweb.configをコピーできます。必要に応じて、Views/Areasフォルダーのweb.configを忘れないでください。
更新：必要なのは、プロジェクトにインストールされているNugetパッケージであることがわかりましたMicrosoft.AspNet.Web.Optimization。ターゲットフレームワークを4.5または4.0として指定したかどうかに関係なく、デフォルトでMVC4RTMアプリに含まれています。これは、バンドルクラスが含まれている名前空間であり、フレームワークに依存しているようには見えません。4.5がインストールされていないサーバーにデプロイしましたが、それでも期待どおりに機能します。DLLがアプリの残りの部分と一緒にデプロイされることを確認してください。
いくつかのことを明確にするために、System.Web.Optimization（別名バンドリング/ミニファイ）は4.0に対して機能します。4.5では何にも依存しないので問題ないはずです。
スクリプトのバンドルが機能していて、CSSの唯一の問題である場合、おそらく問題は相対URLにありますか？
最初にレンダリングされたページを見て、CSSバンドルへの参照を取得しているかどうかを確認します。
<link href="/app/Content/css?v=oI5uNwN5NWmYrn8EXEybCI" rel="stylesheet"/>
もしそうなら、バンドルは機能していますが、CSSバンドル内の何かが台無しになっています。通常、これはCSSバンドル内の相対URLが正しくないことが原因です。つまり、画像が〜/ Contentの下にあるが、バンドルに名前を付ける~/bundles/cssと、ブラウザは。の下の画像を誤って検索します~/bundles。
また、デフォルトの動作では、。の場合、バンドルとミニファイが無効になりdebug=trueます。したがって、の場合でも最適化を有効にする場合debug=trueは、次のことを強制する必要があります。
BundleTable.EnableOptimizations = true
更新：バンドルが空であることを意味する新しい情報をv=""使用して、ファイルをバンドルに正しく追加していること、およびファイルが見つかったことを確認する必要があります。バンドルにファイルをどのように含めていますか？
省略runAllManagedModulesForAllRequests="true"も私のために働いた。次の構成を次の場所に追加しますweb.config。
<modules>
<remove name="BundleModule" />
<add name="BundleModule" type="System.Web.Optimization.BundleModule" />
</modules>
runAllManagedModulesForAllRequests適切に使用しないと、Webサイトにパフォーマンスの低下をもたらします。この記事をチェックしてください。
考慮すべきもう1つのことは、参照に同じ名前を付けることはできないということです。たとえば、librariesディレクトリにjQuery UIがあり、そのJavaScriptファイルを次のようにバンドルしている場合：
bundles.Add(new ScriptBundle("~/libraries").Include("~/libraries/jquery-ui/jqyery-ui.js"));
次に、CSSファイルを次のようにバンドルしてみます。
bundles.Add(new StyleBundle("~/libraries").Include("~/libraries/jquery-ui/jqyery-ui.css"));
...
失敗します。それらは一意の名前を持っている必要があります。だからScriptBundle("~/libraries/js")...、などのようなことをしてくださいScriptBundle("~/libraries/css")...。
既存の回答への補足として、どれも私にはうまくいきませんでした。私はここで私の解決策を見つけました：
https://bundletransformer.codeplex.com/discussions/429707
解決策は
Build ActionとしてマークContent拡張機能のないハンドラーを削除する必要はありませんでした（インターネット上の他のソリューションで見つけることができます）
<add name="BundleModule" type="System.Web.Optimization.BundleModule" />web.config設定を追加する必要はありませんでした。
お役に立てれば！
ライブ環境でCSSで同じ問題が発生しました。私はここですべてのアドバイスに従い、バンドルが舞台裏でどのように機能するかを調査しました。これにより、.Netキャッシュをクリアするように要求しました（アプリサーバーにアクセスできませんでした）。これにより、バンドルがアプリサーバーで機能し始めました。ただし、CDNが構成されたロードバランサーを介してサイトにアクセスする場合、バンドルIDはURLで更新されましたが、バンドルには古いCSSが含まれていました。CDNをフラッシュするだけで問題は解決しました。
これが、これに遭遇する可能性のある他の誰かを助けるのに役立つことを願っています
私のcssファイルの1つに、ファイル名に「_」文字が含まれているため、問題が発生しました。
your_style.cssの名前をyourstyle.cssに変更しました
私はこれが古い問題であることを知っています、しかし人々はまだこれに直面するかもしれません。
以下は、BundleModuleがweb.configに存在してロードされているかどうかを確認し、その存在に基づいてEnableOptimizationsを設定します。
このように、それが利用可能であるかどうかにかかわらず、css/js参照は正常に機能します。言い換えると：
BundleModuleが使用可能な場合、バンドル/最適化が有効になります。
BundleModuleが使用できない場合、バンドル/最適化は無効になり、代わりに完全な参照が自動的に使用されます。
コード：
public static void RegisterBundles(BundleCollection bundles)
{
// bundeling code here
// ...
// bundeling code here
bool bundelingModuleIsAvailable = false;
try {
bundelingModuleIsAvailable = HttpContext.Current.ApplicationInstance.Modules.AllKeys.Contains("BundleModule");
}
catch { }
if (!bundelingModuleIsAvailable)
System.Diagnostics.Debug.WriteLine("WARNING : optimization bundle is not added to Web.config!");
BundleTable.EnableOptimizations = bundelingModuleIsAvailable && !Debug_CheckIsRunning();
//Debug_CheckIsRunning is optional, incase you want to disable optimization when debugging yourself
BundleTable.EnableOptimizations = true;
}
private bool Debug_CheckIsRunning()
{//Check if debug is running
string moduleName = System.Diagnostics.Process.GetCurrentProcess().MainModule.ModuleName;
return (moduleName.Contains("iisexpress.exe") || moduleName.Contains(".vshost") || moduleName.Contains("vstest.executionengine") || moduleName.Contains("WebDev.WebServer"));
}
歴史のためだけに：
バンドル内の言及されたすべてのless/cssファイルにBuildAction="Content"があることを確認してください。
バンドルの一部のファイルが宛先サーバーにない場合でもエラーは発生しません。
私も同じ問題を抱えていましたが、それはばかげた間違いでした。cssファイルはプロジェクトに含まれていなかったため、公開されませんでした。ソリューション内のすべてのファイルを表示して、プロジェクトに追加してください。
css名は一貫している必要があります。
jqueryUI cssの名前は、Contents / themes/baseフォルダーの「jquery.ui.XXX」ではありません。
だからそれはする必要があります：
間違い：
bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
"~/Content/themes/base/jquery.ui.core.css",
"~/Content/themes/base/jquery.ui.resizable.css",
"~/Content/themes/base/jquery.ui.selectable.css",
"~/Content/themes/base/jquery.ui.accordion.css",
"~/Content/themes/base/jquery.ui.autocomplete.css",
"~/Content/themes/base/jquery.ui.button.css",
"~/Content/themes/base/jquery.ui.dialog.css",
"~/Content/themes/base/jquery.ui.slider.css",
"~/Content/themes/base/jquery.ui.tabs.css",
"~/Content/themes/base/jquery.ui.datepicker.css",
"~/Content/themes/base/jquery.ui.progressbar.css",
"~/Content/themes/base/jquery.ui.theme.css"));
正しい ：
bundles.Add(new StyleBundle("~/Bundles/themes/base/css").Include(
"~/Content/themes/base/core.css",
"~/Content/themes/base/resizable.css",
"~/Content/themes/base/selectable.css",
"~/Content/themes/base/accordion.css",
"~/Content/themes/base/autocomplete.css",
"~/Content/themes/base/button.css",
"~/Content/themes/base/dialog.css",
"~/Content/themes/base/slider.css",
"~/Content/themes/base/tabs.css",
"~/Content/themes/base/datepicker.css",
"~/Content/themes/base/progressbar.css",
"~/Content/themes/base/theme.css"));
私はMVC5で試し、正常に動作しました。
Azure Webサイトにコードを展開しているときに、この問題に直面していました。これは、visualstudio.comからビルドを展開したときに機能しましたが、visualstudio2013からビルドを公開しようとしたときに機能しませんでした。主な問題はCSSの縮小でした。私はこの質問に対する最初の回答に完全に同意します。しかし、私のために働いたソリューションを共有することを考えた場合、それはそれを修正するのに役立つかもしれません。
基本的に、VSOを介してデプロイすると、system.web.Optimizationを起動してcss、jsのミニファイファイルが生成されますが、VS 2013からビルドを公開する場合は、以下の点に注意する必要があります。 バンドルと縮小 1.フォルダー構造とバンドラーの命名規則が異なることを確認します。このようなもの。
bundles.Add(new StyleBundle("~/Content/materialize/mcss").Include(
"~/Content//materialize/css/materialize.css"));
2.bundleconfig定義の最後に追加します
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));
// Code removed for clarity.
BundleTable.EnableOptimizations = true;
}
3. web.configにdebugfalseを追加してください（ローカルデバッグを開始すると、VS2013は、prodにデプロイする前に必ず元に戻す必要があることを示すポップアップを表示します。それ自体が多くのことを説明しています。
<system.web>
<compilation debug="true" />
<!-- Lines removed for clarity. -->
</system.web>
Visual Studio 2015では、web.configでdebug = trueが設定されている場合に、BundleConfigでjavascriptファイルの.minバージョンを参照することで問題が発生することがわかりました。
たとえば、jqueryでBundleConfigで以下を指定します。
bundles.Add(new ScriptBundle("~/bundles/jquery").Include("~/Scripts/jquery-{version}.min.js"));
web.configでdebug=trueが設定されていると、jqueryがまったく正しく読み込まれませんでした。
縮小されていないバージョンの参照：
bundles.Add(new ScriptBundle("~/bundles/jquery").Include("~/Scripts/jquery-{version}.js"));
問題を修正します。
debug = falseを設定しても問題は修正されますが、もちろんそれは必ずしも役に立ちません。
一部の縮小されたjavascriptファイルは正しくロードされ、他のファイルはロードされなかったことも注目に値します。VS処理のミニファイを優先して、ミニファイされたjavascriptファイルをすべて削除することになりました。
これを試して：
@System.Web.Optimization.Styles.Render("~/Content/css")
@System.Web.Optimization.Scripts.Render("~/bundles/modernizr")
それは私に働いた。私はまだ学んでいます、そして私はそれがなぜ起こっているのかまだ理解していません
会話に役立つ情報を追加するために、デプロイメントでバンドルの404エラーに遭遇しました（ローカル開発環境では問題ありませんでした）。
バンドル名には、次のようなバージョン番号を含めます。
bundles.Add(new ScriptBundle("~/bundles/jquerymobile.1.4.3").Include(
...
);
気まぐれに、私はすべてのドットを削除し、すべてが再び魔法のように機能していました：
bundles.Add(new ScriptBundle("~/bundles/jquerymobile143").Include(
...
);
それが誰かが時間と欲求不満を節約するのに役立つことを願っています。
このコードを共有ビューに追加する必要があります
@*@Scripts.Render("~/bundles/plugins")*@
<script src="/Content/plugins/jQuery/jQuery-2.1.4.min.js"></script>
<!-- jQuery UI 1.11.4 -->
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<!-- Kendo JS -->
<script src="/Content/kendo/js/kendo.all.min.js" type="text/javascript"></script>
<script src="/Content/kendo/js/kendo.web.min.js" type="text/javascript"></script>
<script src="/Content/kendo/js/kendo.aspnetmvc.min.js"></script>
<!-- Bootstrap 3.3.5 -->
<script src="/Content/bootstrap/js/bootstrap.min.js"></script>
<!-- Morris.js charts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="/Content/plugins/morris/morris.min.js"></script>
<!-- Sparkline -->
<script src="/Content/plugins/sparkline/jquery.sparkline.min.js"></script>
<!-- jvectormap -->
<script src="/Content/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
<script src="/Content/plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
<!-- jQuery Knob Chart -->
<script src="/Content/plugins/knob/jquery.knob.js"></script>
<!-- daterangepicker -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.2/moment.min.js"></script>
<script src="/Content/plugins/daterangepicker/daterangepicker.js"></script>
<!-- datepicker -->
<script src="/Content/plugins/datepicker/bootstrap-datepicker.js"></script>
<!-- Bootstrap WYSIHTML5 -->
<script src="/Content/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>
<!-- Slimscroll -->
<script src="/Content/plugins/slimScroll/jquery.slimscroll.min.js"></script>
<!-- FastClick -->
<script src="/Content/plugins/fastclick/fastclick.min.js"></script>
<!-- AdminLTE App -->
<script src="/Content/dist/js/app.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="/Content/dist/js/demo.js"></script>
<!-- Common -->
<script src="/Scripts/common/common.js"></script>
<!-- Render Sections -->
@RenderSection("scripts", required: false)
@RenderSection("HeaderSection", required: false)
nugetからいくつかのパッケージを追加しているときにこの問題が発生し、更新を行うのを忘れました
したがって、最初にプロジェクトにインストールされているすべてのパッケージを更新します
Update-Package
Global.asax.csに以下を追加します
BundleTable.EnableOptimizations = true;
これで私の問題は解決しました。これらの行を_layout.cshtmlに追加しました
@*@Scripts.Render("~/bundles/plugins")*@
<script src="/Content/plugins/jQuery/jQuery-2.1.4.min.js"></script>
<!-- jQuery UI 1.11.4 -->
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<!-- Kendo JS -->
<script src="/Content/kendo/js/kendo.all.min.js" type="text/javascript"></script>
<script src="/Content/kendo/js/kendo.web.min.js" type="text/javascript"></script>
<script src="/Content/kendo/js/kendo.aspnetmvc.min.js"></script>
<!-- Bootstrap 3.3.5 -->
<script src="/Content/bootstrap/js/bootstrap.min.js"></script>
<!-- Morris.js charts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="/Content/plugins/morris/morris.min.js"></script>
<!-- Sparkline -->
<script src="/Content/plugins/sparkline/jquery.sparkline.min.js"></script>
<!-- jvectormap -->
<script src="/Content/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
<script src="/Content/plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
<!-- jQuery Knob Chart -->
<script src="/Content/plugins/knob/jquery.knob.js"></script>
<!-- daterangepicker -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.2/moment.min.js"></script>
<script src="/Content/plugins/daterangepicker/daterangepicker.js"></script>
<!-- datepicker -->
<script src="/Content/plugins/datepicker/bootstrap-datepicker.js"></script>
<!-- Bootstrap WYSIHTML5 -->
<script src="/Content/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>
<!-- Slimscroll -->
<script src="/Content/plugins/slimScroll/jquery.slimscroll.min.js"></script>
<!-- FastClick -->
<script src="/Content/plugins/fastclick/fastclick.min.js"></script>
<!-- AdminLTE App -->
<script src="/Content/dist/js/app.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="/Content/dist/js/demo.js"></script>
<!-- Common -->
<script src="/Scripts/common/common.js"></script>
<!-- Render Sections -->
私は同じ問題を抱えていました。私はただ変換します
@Styles.Render("~/Content/css")
and @Scripts.Render("~/bundles/modernizr") to
@Styles.Render("/Content/css")
@Scripts.Render("/bundles/modernizr")
そしてそれは働いた。変換することを忘れないでください
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
to
@Scripts.Render("/bundles/jquery")
@Scripts.Render("/bundles/bootstrap")
良い時間を過ごす