web-dev-qa-db-ja.com

CSSバンドルがbin deploy MVC 4アプリで動作しないのはなぜですか？

ここで与えられたアドバイスと1つまたは2つのオンザフライ修正に基づいて、ホスティングプロバイダーにMVC4アプリケーションをbinデプロイしましたが、最もすぐに明らかになる問題は、cssのバンドルが機能しないことです。バンドルrefを明示的なファイルrefに置き換えると、cssは再び機能します。

VS2012の標準MVC4 RTMプロジェクトテンプレートを使用しています。プロバイダーはIIS 7.5およびASP.NET 4を実行しており、同じアプリの以前のMVC3バージョンは正常に機能しました。低すぎるバージョンの依存関係を取得したと推測します。これは エリアベースのアクションリンクの問題 にも影響する可能性があります。

技術的な症状は次のとおりです。

@Styles.Render("~/Content/css")行は<link href="/Content/css?v=" rel="stylesheet"/>としてレンダリングされます

asp.net-mvcasp.net-mvc-4asp.net-optimization
66
ProfK

CSSとスクリプトのバンドルは、.NETが4.0または4.5を実行しているかどうかに関係なく機能するはずです。 .NET 4.0を実行していますが、問題なく動作します。ただし、縮小とバンドルの動作を機能させるには、web.configをデバッグモードで実行しないように設定する必要があります。

<compilation debug="false" targetFramework="4.0">

_Layout.cshtmlファイルのjQuery UIの例にこのバンドルを使用します。

@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ファイルの問題を簡単にデバッグできます。 MVC4 RTMを使用しています。

MVCの依存関係の問題であると思われる場合は、Nugetに移動してMVC関連のパッケージをすべて削除し、Microsoft.AspNet.Mvcパッケージを検索してインストールすることをお勧めします。私は最新バージョンを使用しており、v.4.0.20710.0として公開されています。これで、必要なすべての依存関係を取得できます。

また、以前MVC3を使用していて、MVC4を使用しようとしている場合は、web.config（s）に移動し、参照を更新してMVC 4.0バージョンを指すようにします。不明な場合は、いつでも新しいMVC4アプリを作成し、そこからweb.configをコピーできます。その場合は、Views/Areasフォルダーのweb.configを忘れないでください。

PDATE：必要なのは、プロジェクトにインストールされたNugetパッケージMicrosoft.AspNet.Web.Optimizationであることがわかりました。ターゲットフレームワークを4.5と4.0のどちらに指定しても、MVC4 RTMアプリにはデフォルトで含まれています。これは、バンドルクラスが含まれるネームスペースであり、フレームワークに依存していないようです。 4.5がインストールされていないサーバーにデプロイしましたが、期待どおりに動作します。 DLLがアプリの他の部分と一緒にデプロイされることを確認してください。

76
Nick Albrecht

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」に変更する必要がありました。

79
cdeutsch

いくつかのことを明確にするために、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=""という新しい情報、つまりバンドルが空だったことで、バンドルにファイルを正しく追加していることと、ファイルが見つかったことを確認する必要があります。バンドルにファイルをどのように含めますか？

12
Hao Kung

runAllManagedModulesForAllRequests="true"を省略することもうまくいきました。 web.configに次の構成を追加します。

<modules>
  <remove name="BundleModule" />
  <add name="BundleModule" type="System.Web.Optimization.BundleModule" />
</modules>

runAllManagedModulesForAllRequestsは、適切に使用しないとWebサイトのパフォーマンスに影響を与えます。 この記事 をご覧ください。

10
Kurt

考慮すべきもう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")...などのようなことをしてください。

3
Jonathan Landrum

CSSファイルの1つに、ファイル名に「_」文字が含まれていたため、問題が発生しました。

Your_style.cssの名前をyourstyle.cssに変更しました

1
cal5barton

ライブ環境のCSSで同じ問題が発生しました。ここでのすべてのアドバイスに従い、バンドリングが舞台裏でどのように機能するかを調査しました。これにより、.Netキャッシュがクリアされた（アプリサーバーにアクセスできなかった）ことを要求することになりました。これにより、アプリサーバーでバンドリングが動作し始めました。ただし、CDNが設定されたロードバランサーを介してサイトにアクセスすると、URLでバンドル識別子が更新されましたが、バンドルには古いCSSが含まれていました。 CDNをフラッシュするだけで問題は解決しました。

これが、これに遭遇する可能性のある他の誰かを助けるための何らかの方法になることを願っています

1
Corporalis

私はこれが古い問題であることを知っていますが、人々はまだこれに直面しているかもしれません。

次は、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"));
    }
1
Amro

既存の回答の補遺として、どれも役に立たなかったため、ここで解決策を見つけました：

https://bundletransformer.codeplex.com/discussions/429707

解決策は

  1. visual Studioで.lessファイルを右クリックします
  2. プロパティを選択
  3. Build ActionをContentとしてマークします
  4. 再展開

エクステンションレスハンドラーを削除する必要はありませんでした（インターネット上の他のソリューションで確認できます）

<add name="BundleModule" type="System.Web.Optimization.BundleModule" /> web.config設定を追加する必要はありませんでした。

お役に立てれば！

1
Alex C

会話に有用な情報を追加するために、デプロイメントのバンドルで404エラーに遭遇しました（ローカルの開発環境では問題ありませんでした）。

バンドル名には、次のようなバージョン番号を含めます。

bundles.Add(new ScriptBundle("~/bundles/jquerymobile.1.4.3").Include(
...
);

気まぐれに、私はすべてのドットを削除し、すべてが再び魔法のように働いていました：

bundles.Add(new ScriptBundle("~/bundles/jquerymobile143").Include(
...
);

誰かが時間とフラストレーションを節約できることを願っています。

0
ltree

共有ビューにこのコードを追加する必要があります

 @*@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)
0
user3452580

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で試してみましたが、うまくいきました。

0
Adem Aygun

歴史のためだけに：

バンドルに記載されているすべてのless/cssファイルにBuild Action = "Content"があることを確認してください。

宛先サーバーにバンドルの一部のファイルが欠落していてもエラーはありません。

0
Somescout

私は同じ問題を抱えていて、愚かな間違いであることが判明しました.cssファイルはプロジェクトに含まれていなかったため公開されませんでした。ソリューション内のすべてのファイルを表示してプロジェクトに追加してください。

0
Ronen Festinger

これを試して：

    @System.Web.Optimization.Styles.Render("~/Content/css")
    @System.Web.Optimization.Scripts.Render("~/bundles/modernizr")

うまくいきました。私はまだ学んでいますが、なぜそれが起こっているのかまだわかりません

0
Andrew

Nugetからいくつかのパッケージを追加しているときにこの問題が発生し、更新を忘れました

そのため、最初にプロジェクトにインストールされているすべてのパッケージの更新を行います

Update-Package

Global.asax.csに次を追加します

BundleTable.EnableOptimizations = true;
0
Bajju

Azure Webサイトにコードをデプロイしているときに、この問題に直面していました。 visualstudio.comからビルドを展開したときに機能しましたが、visual studio 2013からビルドを公開しようとしたときではありませんでした。主な問題はCSSの最小化でした。この質問に対する最初の回答に完全に同意します。しかし、私のために働いたソリューションを共有することを考えて、それはあなたがそれを修正するのに役立つかもしれません。

基本的にVSOを介して展開する場合、system.web.Optimizationを開始することでcss、jsの縮小ファイルを生成しますが、VS 2013からビルドを公開する場合は、以下の点に注意する必要があります。 bundling-and-minification 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にdebug falseを必ず追加してください（ローカルデバッグを開始すると、VS2013は、prodにデプロイする前に必ず戻す必要があることを示すポップアップを表示します。

<system.web>
  <compilation debug="true" />
  <!-- Lines removed for clarity. -->
</system.web>
0
u2307421

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ファイルをすべて削除しました。

0
James Blake