web-dev-qa-db-fra.com

Pourquoi mon regroupement CSS ne fonctionne-t-il pas avec une application bin deploy MVC 4?

Bin a déployé une application MVC4 chez mon fournisseur d'hébergement, sur la base des conseils donnés ici et d'un ou deux correctifs à la volée, mais le problème le plus immédiatement apparent est que le regroupement pour css ne fonctionne pas. Lorsque je remplace la référence du paquet par des références de fichier explicites, mon css fonctionne à nouveau.

J'utilise un modèle de projet MVC4 RTM standard de VS2012. Le fournisseur exécute IIS 7.5 et ASP.NET 4, et ma version précédente de MVC3 de la même application fonctionnait correctement. Je suppose que j'ai attrapé une dépendance dans une version trop basse, ce qui pourrait également contribuer à mon problème de lien d'action basé sur une zone .

Les symptômes techniques sont:

La ligne @Styles.Render("~/Content/css") est rendue en <link href="/Content/css?v=" rel="stylesheet"/>

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

Le regroupement de CSS et de scripts doit fonctionner indépendamment du fait que .NET exécute 4.0 ou 4.5. J'utilise .NET 4.0 et cela fonctionne bien pour moi. Cependant, pour que le comportement de minification et de groupement fonctionne, votre Web.config doit être configuré pour ne pas s'exécuter en mode débogage.

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

Prenez cet exemple pour l'interface utilisateur de jQuery dans le fichier _Layout.cshtml.

@Styles.Render("~/Content/themes/base/css")

Si je cours avec debug="true" j'obtiens le code HTML suivant.

<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"/>

Mais si je cours avec debug="false". Je vais chercher ça à la place.

<link href="/Content/themes/base/css?v=myqT7npwmF2ABsuSaHqt8SCvK8UFWpRv7T4M8r3kiK01" rel="stylesheet"/>

Cette fonctionnalité vous permet de résoudre facilement les problèmes liés à vos fichiers de script et CSS. J'utilise le MVC4 RTM.

Si vous pensez que cela pourrait être un problème de dépendance de MVC, je vous conseillerais d'aller dans Nuget et de supprimer tous vos packages liés à MVC, puis de rechercher le package Microsoft.AspNet.Mvc et de l'installer. J'utilise la version la plus récente et elle s'appelle v.4.0.20710.0. Cela devrait englober toutes les dépendances dont vous avez besoin.

De même, si vous utilisiez MVC3 et essayez maintenant d’utiliser MVC4, vous voudrez accéder à votre (vos) web.config (s) et mettre à jour leurs références pour pointer vers la version 4.0 de MVC. Si vous n'êtes pas sûr, vous pouvez toujours créer une nouvelle application MVC4 et copier le fichier web.config à partir de là. N'oubliez pas le web.config dans vos dossiers Views/Areas si vous le faites.

UPDATE: J'ai constaté qu'il vous fallait le package Nuget Microsoft.AspNet.Web.Optimization installé dans votre projet. Elle est incluse par défaut dans une application MVC4 RTM, que vous spécifiiez le cadre cible en tant que 4.5 ou 4.0. Il s'agit de l'espace de noms dans lequel les classes de regroupement sont incluses et ne semble pas dépendre du cadre. J'ai déployé sur un serveur sur lequel la version 4.5 n'est pas installée et il fonctionne toujours comme prévu pour moi. Assurez-vous simplement que la DLL est déployée avec le reste de votre application.

73
Nick Albrecht

MISE À JOUR 11/04/2013:

La raison en est que vous avez .js ou .css à la fin du nom de votre bundle, ce qui empêche ASP.NET d'exécuter la demande via MVC et BundleModule.

Le moyen recommandé pour résoudre ce problème pour de meilleures performances consiste à supprimer le .js ou .css du nom de votre bundle.

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

Sinon, vous pouvez modifier votre web.config dans la section system.webServer pour exécuter ces requêtes via BundleModule (ce 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), c'est également un problème. Je devais changer le nom de mon ensemble de «DataTablesCSS» en «DataTablesStyles» pour résoudre mon problème.

76
cdeutsch

Pour clarifier quelques points, System.Web.Optimization (aka Bundling/Minification) fonctionnera contre la version 4.0. Cela ne dépend pas de quoi que ce soit en 4.5, donc il ne devrait y avoir aucun problème là-bas.

Si le regroupement de scripts fonctionne et qu'il ne s'agit que d'un problème lié à CSS, le problème concerne peut-être les URL relatives? 

Dans un premier temps, je regarderais la page rendue pour voir si vous obteniez des références au paquet CSS, c'est-à-dire quelque chose comme:

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

Si vous le faites, le regroupement fonctionne, mais un élément de votre groupe CSS est perturbé. Cela est généralement dû au fait que les URL relatives de votre groupe CSS sont incorrectes, c’est-à-dire si vos images se trouvent sous ~/Content, mais que vous nommez votre groupe ~/bundles/css, le navigateur ne recherchera pas les images sous ~/bundles.

En outre, le comportement par défaut consiste à désactiver l’association et la minification lorsque debug=true. Donc, si vous voulez que les optimisations soient activées même lorsque debug=true, vous devrez forcer:

BundleTable.EnableOptimizations = true

Mise à jour: Avec les nouvelles informations que v="", cela signifie que le paquet était vide, vous devez vérifier que vous ajoutez correctement des fichiers au paquet et qu'il les a trouvés. Comment incluez-vous les fichiers dans le paquet?

11
Hao Kung

Omettre runAllManagedModulesForAllRequests="true" a également fonctionné pour moi. Ajoutez 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 si elle n'est pas utilisée correctement Découvrez cet article .

10
Kurt

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

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

puis essayez de regrouper ses fichiers CSS comme suit:

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

ça va échouer. Ils doivent avoir des noms uniques. Alors, faites quelque chose comme ScriptBundle("~/libraries/js")... et ScriptBundle("~/libraries/css")... ou autre chose.

3
Jonathan Landrum

Un de mes fichiers CSS avait un caractère '_' dans le nom du fichier, ce qui posait problème.

Renommé your_style.css en yourstyle.css

1
cal5barton

J'ai rencontré le même problème avec CSS sur un environnement en direct. J'ai suivi tous les conseils donnés ici et ai étudié le fonctionnement du groupement en arrière-plan. Cela m'a amené à demander que le cache .Net soit effacé (je n'avais pas accès aux serveurs d'applications), ce qui a amené le regroupement à fonctionner sur les serveurs d'applications. Cependant, lors de l'accès au site via un équilibreur de charge avec un CDN configuré, bien que l'identifiant de l'ensemble ait été mis à jour dans l'URL, l'ensemble contenait l'ancien CSS. Le simple fait de purger le CDN a résolu le problème.

J'espère que cela contribuera à aider quelqu'un d'autre susceptible de le rencontrer

1
Corporalis

Je sais que c'est un vieux problème, mais les gens peuvent toujours faire face à cela.

Les éléments suivants vérifient si BundleModule existe dans web.config et chargé, et définit EnableOptimizations en fonction de son existence.

Ainsi, qu’il soit disponible ou non, les références css/js fonctionneront correctement. En d'autres termes:

  • Si BundleModule est disponible, l'intégration/l'optimisation sera activée.

  • Si BundleModule n'est pas disponible, le regroupement/l'optimisation sera désactivé et les références complètes seront automatiquement utilisées.

Code:

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

En complément aux réponses existantes, aucune d’entre elles n’ayant fonctionné, j’ai trouvé ma solution ICI: 

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

La solution était de 

  1. clic droit sur les fichiers .less dans Visual Studio
  2. Sélectionnez les propriétés 
  3. Marquer le Build Action comme Content
  4. Redéployer

Je n'ai PAS eu besoin de supprimer les gestionnaires sans extension (comme on peut le trouver dans d'autres solutions sur Internet) 

Je n'ai PAS eu à ajouter le paramètre <add name="BundleModule" type="System.Web.Optimization.BundleModule" /> web.config.

J'espère que cela t'aides!

1
Alex C

Pour ajouter des informations utiles à la conversation, j'ai rencontré 404 erreurs pour mes bundles dans le déploiement (c'était très bien dans l'environnement de développement local).

Pour les noms de paquet, j'inclus les numéros de version tels que:

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 comme par magie:

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

J'espère que cela aidera quelqu'un à économiser du temps et de la frustration. 

0
ltree

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

les noms CSS doivent être cohérents.

Les noms de jqueryUI css ne sont pas "jquery.ui.XXX" dans le dossier Contents/themes/base. 

il devrait donc être:

faux:

            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 j'ai travaillé avec succès.

0
Adem Aygun

Juste pour l'histoire:

Vérifiez que tous les fichiers less/css mentionnés dans le paquet ont une action de construction = "Contenu". 

Il n'y a pas d'erreur si certains fichiers de l'ensemble sont manquants sur le serveur de destination.

0
Somescout

J'ai eu le même problème et il s'est avéré être une erreur stupide, les fichiers CSS n'étant pas inclus dans le projet, ils ne sont donc pas publiés. Assurez-vous d'afficher tous les fichiers de la solution et de les ajouter au projet.

0
Ronen Festinger

essaye ça:

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

Cela a fonctionné pour moi . J'apprends toujours, et je n'ai pas encore compris pourquoi c'est arrivé

0
Andrew

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

Alors commencez par mettre à jour tous les paquetages installés dans le projet

Update-Package

Dans le fichier Global.asax.cs, ajoutez ce qui suit

BundleTable.EnableOptimizations = true;
0
Bajju

Je faisais face à ce problème lors du déploiement du code sur les sites Web Azure. cela a fonctionné lorsque j'ai déployé build de visualstudio.com et ce n'était pas le cas lorsque j'ai essayé de publier la version de visual studio 2013. Le problème principal était CSS Minification. Je suis totalement d'accord avec la 1ère réponse à cette question. mais je pense que la solution de partage qui a fonctionné pour moi peut vous aider à la réparer.

en gros, lorsque nous déployons via VSO, il génère des fichiers de minification pour CSS, JS en démarrant dans system.web.Optimization, mais lorsque nous publions une version de VS 2013, nous devons prendre en charge les éléments ci-dessous . bundling-and- minification 1. assurez-vous que la structure des dossiers et la convention de nommage de votre bundler doivent être différentes. quelque chose comme ça.

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

2. ajoutez au bas de votre définition de 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. Assurez-vous d’ajouter debug false dans web.config (lorsque vous démarrez le débogage local, VS2013 affiche une fenêtre contextuelle vous indiquant que vous devez vous assurer de la remettre avant de déployer dans prod. Cela explique beaucoup de choses.

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

Avec Visual Studio 2015, le problème était dû au référencement de la version .min d'un fichier javascript dans BundleConfig lorsque debug = true était défini dans le fichier 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"));

jquery ne se chargeait pas du tout correctement lorsque debug = true était défini dans le fichier web.config.

Référencer la version non-minifiée:

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

corrige le problème.

Définir debug = false corrige également le problème, mais bien sûr, cela n'est pas vraiment utile.

Il convient également de noter que si certains fichiers javascript minifiés ont été chargés correctement et d’autres pas. J'ai fini par supprimer tous les fichiers javascript minifiés au profit de la gestion par VS de la minification pour moi.

0
James Blake