Pourquoi mon module CSS ne fonctionne-t-il pas avec une application MVC4 déployée?

mise à jour 11/4/2013:

la raison pour laquelle cela se produit est parce que vous avez .js ou .css à la fin de votre nom de paquet qui provoque ASP.NET pour ne pas lancer la requête via MVC et le BundleModule.

il est recommandé de supprimer le .js ou .css de votre nom de paquet.

So / bundle / myscripts.js devient / bundle/myscripts

vous pouvez aussi modifier votre site web.config dans le système .webServer section pour exécuter ces demandes à travers le BundleModule (qui était ma réponse originale)

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

Edit: j'ai aussi remarqué que si le nom se termine par 'css' (sans le point), qui est un problème. J'ai dû changer le nom de mon paquet de "DataTablesCSS" à "DataTablesStyles" pour corriger mon problème.

juste pour clarifier quelques choses, System.Web.Optimization (Alias Bundling/Minification) fonctionnera contre 4.0. Il ne dépend pas de quoi que ce soit en 4.5, il ne devrait donc pas y avoir de problèmes.

si le bundling de script fonctionne, et c'est seulement un problème avec CSS, peut-être que le problème est avec des URLs relatives?

je voudrais d'abord regarder la page rendue et voir si vous obtenez des références au paquet CSS, c.-à-d. quelque chose comme:

<link href="/app/Content/css?v=oI5uNwN5NWmYrn8EXEybCI" rel="stylesheet"/>

si vous l'êtes, alors le bundling fonctionne, mais quelque chose à l'intérieur de votre bundle CSS est foiré. Habituellement, ceci est dû au fait que les URL relatives à l'intérieur de votre paquet CSS sont incorrectes, c.-à-d. si vos images vivent sous ~/Content, mais que vous nommez votre paquet ~/bundles/css , le navigateur ne cherchera pas correctement les images sous ~/bundles .

aussi, le comportement par défaut est de désactiver le bundling et la minification quand debug=true . Donc, si vous voulez des optimisations activées même quand debug=true , vous devrez forcer:

BundleTable.EnableOptimizations = true

mise à Jour: Avec la nouvelle info que v="" , cela signifie que le paquet est vide, vous devez vérifier que vous ajoutez des fichiers pour le paquet correctement, et qu'il les a trouvés. Comment incluez-vous les fichiers dans le paquet?

omettant runAllManagedModulesForAllRequests="true" a aussi fonctionné pour moi. Ajouter la configuration suivante dans web.config :

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

runAllManagedModulesForAllRequests imposera un succès de performance sur votre site web s'il n'est pas utilisé de manière appropriée. Consultez cet article .

une autre chose à considérer est que les références ne peuvent pas avoir le même nom. Par exemple, si vous avez jQuery UI dans le répertoire libraries , et regroupez son fichier JavaScript comme suit:

bundles.Add(new ScriptBundle("~/libraries").Include("~/libraries/jquery-ui/jqyery-ui.js"));

et ensuite essayer de regrouper ses fichiers CSS comme suit:

bundles.Add(new StyleBundle("~/libraries").Include("~/libraries/jquery-ui/jqyery-ui.css"));
...

il échouera. Ils doivent avoir des noms uniques. Alors faites quelque chose comme ScriptBundle("~/libraries/js")... et ScriptBundle("~/libraries/css")... ou autre.

comme addendum aux réponses existantes, dont aucune ne fonctionnait pour moi, J'ai trouvé ma solution ici:

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

la solution était de

1. clic droit sur le .moins de fichiers dans visual studio
2. choisir des propriétés
3. marquer le Build Action comme Content
4. Redéploiement 1519130920"

Je N'ai pas eu besoin de supprimer les manipulateurs sans extension (comme on peut le trouver dans d'autres solutions sur l'internet)

Je N'ai pas eu à ajouter le web <add name="BundleModule" type="System.Web.Optimization.BundleModule" /> .paramètre de configuration.

Espérons que cette aide!

j'ai rencontré le même problème avec CSS sur un environnement réel. J'ai suivi tous les conseils ici et étudié la façon dont le groupement fonctionne en arrière-scène. Cela m'a amené à demander que le cache .Net soit effacé (Je n'avais pas accès aux serveurs app), ce qui a fait que le bundling a commencé à fonctionner sur les serveurs app. Cependant, lorsque vous accédez au site par l'intermédiaire d'un répartiteur de charge avec un CDN configuré, bien que l'Identificateur de faisceau ait été mis à jour dans l'url, le faisceau contenait l'ancien CSS. Simplement rincer le CA a résolu le problème.

j'espère que cela va en aider quelques un d'autre qui peut rencontrer ce

un de mes fichiers css avait un caractère '_' dans le nom du fichier qui a causé des problèmes.

renommé your_style.css pour yourstyle.css

Juste pour l'histoire:

vérifier que tous les fichiers less/css mentionnés dans bundle ont L'Action de compilation = "Content".

il n'y a pas d'erreur si certains fichiers de bundle manquent sur le serveur de destination.

j'ai eu le même problème et il s'est avéré être une erreur stupide, les fichiers css, n'ont pas été inclus dans le projet sorte qu'ils n'avaient pas publié, assurez-vous d'afficher tous les fichiers dans la solution et de les ajouter au projet.

je faisais face à ce problème lors du déploiement du code sur les sites Azure. il a fonctionné quand j'ai déployé construire à partir visualstudio.com et ce n'était pas le cas quand j'ai essayé de publier le build from visual studio 2013. le principal problème était la Minification CSS. Je suis tout à fait d'accord avec la première réponse à cette question. mais penser à la solution de partage qui a fonctionné pour moi, peut-être qu'il vous aidera à le réparer.

essentiellement quand nous déployons par VSO il génère des fichiers de minification pour css, js par des coups de pied dans le système.Web.Optimisation, mais quand nous publions construire à partir de VS 2013 nous devons prendre soin de ce qui suit. bundling-et-minification 1. assurez-vous que la structure du dossier et votre convention de nommage du bundler doivent être différentes. quelque chose comme cela.

bundles.Add(new StyleBundle("~/Content/materialize/mcss").Include(
                  "~/Content//materialize/css/materialize.css"));

2. ajouter à la fin de votre bundleconfig définition

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. assurez-vous d'ajouter debug false dans web.config (lorsque vous commencez le débogage local) VS2013 vous donnera un popup disant que vous devez vous assurer de le remettre avant de le déployer dans prod. que l'explique lui-même beaucoup.

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

avec Visual Studio 2015 j'ai trouvé que le problème a été causé par le référencement du .Version min d'un fichier javascript dans le BundleConfig lorsque debug=true est défini dans le web.config.

par exemple, avec jquery spécifiant ce qui suit dans BundleConfig:

bundles.Add(new ScriptBundle("~/bundles/jquery").Include("~/Scripts/jquery-{version}.min.js"));

a pour conséquence que le jQuery ne se charge pas correctement du tout lorsque debug=true a été défini dans le web.config.

faisant référence à la version non miniaturisée:

bundles.Add(new ScriptBundle("~/bundles/jquery").Include("~/Scripts/jquery-{version}.js"));

corrige le problème.

définir debug=false corrige aussi le problème, mais bien sûr ce n'est pas vraiment utile.

il est également intéressant de noter que si certains fichiers javascript miniaturisés chargés correctement et d'autres pas. J'ai fini par supprimer tous les fichiers javascript miniifiés en faveur de VS traitant minification pour moi.

essayez ceci:

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

ça a marché pour moi. Je suis encore en apprentissage, et je n'ai pas encore compris pourquoi cela se produit

pour ajouter des informations utiles à la conversation, je suis tombé sur 404 erreurs pour mes paquets dans le déploiement (il était très bien dans l'environnement local dev).

pour les noms de paquets, y compris les numéros de version comme tels:

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

sur un coup de tête, j'ai enlevé tous les points et tout fonctionnait à nouveau par magie:

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

espoir qui aide quelqu'un à gagner du temps et de la frustration.

j'ai eu ce problème en ajoutant quelques paquets de nuget et j'ai oublié de faire une mise à jour

donc tout d'abord faire une mise à jour de tous les paquets installés dans le projet

Update-Package

Dans le monde.asax.cs ajouter le texte suivant:

BundleTable.EnableOptimizations = true;

noms css doit être cohérent.

les noms de jQueryUI css ne sont pas " jquery.interface.XXX" dans le Contenu/thèmes/dossier de base .

il devrait en être ainsi:

mauvais:

            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"));

correct:

            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"));

j'ai essayé dans MVC5 et travaillé avec succès.

vous devez ajouter ce code dans votre vue partagée

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

Cela a résolu mon problème. J'ai ajouté ces lignes dans _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 -->

j'ai eu le même problème . je viens de convertir

@Styles.Render("~/Content/css")
and @Scripts.Render("~/bundles/modernizr") to 
    @Styles.Render("/Content/css")
    @Scripts.Render("/bundles/modernizr")

et ses ouvrés. n'oubliez pas de convertir

   @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
to 
    @Scripts.Render("/bundles/jquery")
    @Scripts.Render("/bundles/bootstrap")

belle époque