asp.net mvc - net - ¿Por qué mi agrupación de CSS no funciona con una aplicación MVC4 desplegada?

bootstrap (19)

He desplegado una aplicación MVC4 a mi proveedor de hosting, en base a los consejos dados aquí y una o dos correcciones sobre la marcha, pero el problema más aparente inmediatamente es que la agrupación para css no funciona. Cuando reemplazo la referencia de paquete con referencias de archivo explícitas, mi CSS funciona nuevamente.

Estoy usando una plantilla de proyecto MVC4 RTM estándar de VS2012. El proveedor ejecuta IIS 7.5 y ASP.NET 4, y mi versión anterior MVC3 de la misma aplicación funcionó bien. Supongo que he obtenido una dependencia en alguna parte de una versión demasiado baja, y esto también podría contribuir a mi problema de enlace de acción basado en el área .

Los síntomas técnicos son:

La línea @Styles.Render("~/Content/css") representa como <link href="/Content/css?v=" rel="stylesheet"/>

ACTUALIZACIÓN 04/11/2013:

La razón por la que esto ocurre es porque tiene .js o .css al final del nombre del paquete, lo que hace que ASP.NET no ejecute la solicitud a través de MVC y BundleModule.

La forma recomendada de corregir esto para un mejor rendimiento es eliminar .js o .css del nombre de su paquete.

So /bundle/myscripts.js se convierte en / bundle / myscripts

Alternativamente, puede modificar su web.config en la sección system.webServer para ejecutar estas solicitudes a través del BundleModule (que fue mi respuesta original)

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

Editar: También noté que si el nombre termina con ''css'' (sin el punto), también es un problema. Tuve que cambiar el nombre de mi paquete de ''DataTablesCSS'' a ''DataTablesStyles'' para solucionar mi problema.

Como una adición a las respuestas existentes, ninguna de las cuales funcionó para mí, encontré mi solución AQUÍ:

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

La solución fue

haga clic derecho en los archivos .less en el estudio visual
Seleccionar propiedades
Marque la Build Action como Content
Redespliegue

NO necesité eliminar manejadores sin extensión (como se puede encontrar en otras soluciones en Internet)

NO tuve que agregar la <add name="BundleModule" type="System.Web.Optimization.BundleModule" /> web.config.

¡Espero que esto ayude!

Con Visual Studio 2015 descubrí que el problema se debía a que hacía referencia a la versión .min de un archivo javascript en BundleConfig cuando debug = true está establecido en web.config.

Por ejemplo, con jquery especificando lo siguiente en BundleConfig:

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

como resultado, el jquery no se carga correctamente cuando se configuró debug = true en el archivo web.config.

Referenciando la versión no minificada:

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

corrige el problema

Establecer debug = false también corrige el problema, pero, por supuesto, eso no es exactamente útil.

También vale la pena señalar que, si bien algunos archivos javascript minimizados se cargaron correctamente y otros no. Terminé eliminando todos los archivos javascript minimizados a favor de la minificación de manipulación VS para mí.

Debes agregar este código en tu Vista compartida

@ @ Scripts.Render ("~ / paquetes / complementos") @ enter code here enter code here @RenderSection ("scripts", requerido: falso) @RenderSection ("HeaderSection", requerido: falso)

Encontré el mismo problema con CSS en un entorno en vivo. Seguí todos los consejos aquí e investigué cómo funciona el agrupamiento detrás de la escena. Esto me llevó a solicitar que el caché .Net fuera borrado (no tuve acceso a los servidores de la aplicación) lo que provocó que la agrupación comenzara a funcionar en los servidores de la aplicación. Sin embargo, al acceder al sitio a través de un equilibrador de carga con un CDN configurado, aunque el identificador del paquete se actualizó en la url, el paquete contenía el antiguo CSS. Simplemente purgando el CDN resolvió el problema.

Espero que esto sirva para ayudar a alguien más que pueda enfrentar esto

Estaba enfrentando este problema al implementar el código en los sitios web de Azure. funcionó cuando implementé la compilación desde visualstudio.com y no fue cuando traté de publicar la compilación desde visual studio 2013. el problema principal fue la Minificación de CSS. Estoy totalmente de acuerdo con la primera respuesta a esta pregunta. pero pensé en compartir la solución que funcionó para mí, puede ser que te ayude a solucionarlo.

Básicamente, cuando nos desplegamos a través de VSO, genera archivos de minificación para css, js activando system.web.Optimization, pero cuando publicamos build desde VS 2013, tenemos que encargarnos de lo que sigue. bundling-and-minification 1. asegúrese de que la estructura de la carpeta y la convención de nomenclatura de su paquete sean diferentes. algo como esto.

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

2. agregue en la parte inferior de la definición 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. asegúrese de agregar errores de depuración en web.config (cuando inicia la depuración local, VS2013 le mostrará una ventana emergente que le indicará que debe asegurarse de volver a colocarla antes de implementarla en prod., Que en sí misma explica mucho).

<system.web> <compilation debug="true" />  </system.web>

Esto resolvió mi problema. He agregado estas líneas en _layout.cshtml

@*@Scripts.Render("~/bundles/plugins")*@ <script src="/Content/plugins/jQuery/jQuery-2.1.4.min.js"></script>  <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>  <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>  <script src="/Content/bootstrap/js/bootstrap.min.js"></script>  <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>  <script src="/Content/plugins/sparkline/jquery.sparkline.min.js"></script>  <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>  <script src="/Content/plugins/knob/jquery.knob.js"></script>  <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>  <script src="/Content/plugins/datepicker/bootstrap-datepicker.js"></script>  <script src="/Content/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>  <script src="/Content/plugins/slimScroll/jquery.slimscroll.min.js"></script>  <script src="/Content/plugins/fastclick/fastclick.min.js"></script>  <script src="/Content/dist/js/app.min.js"></script>  <script src="/Content/dist/js/demo.js"></script>  <script src="/Scripts/common/common.js"></script>

La agrupación CSS y Script debería funcionar independientemente de si .NET está ejecutando 4.0 o 4.5. Estoy ejecutando .NET 4.0 y funciona bien para mí. Sin embargo, para que la minificación y el comportamiento de agrupamiento funcionen, su web.config debe configurarse para que no se ejecute en modo de depuración.

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

Tome este paquete para el ejemplo de la interfaz de usuario jQuery en el archivo _Layout.cshtml.

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

Si ejecuto con debug="true" obtengo el siguiente HTML.

Pero si ejecuto con debug="false" . Voy a obtener esto en su lugar.

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

Esta es una característica para que pueda depurar fácilmente problemas con sus archivos Script y CSS. Estoy usando el MVC4 RTM.

Si crees que podría tratarse de un problema de dependencia MVC, te recomiendo que vayas a Nuget y elimines todos tus paquetes relacionados con MVC, y luego busques el paquete Microsoft.AspNet.Mvc e instálalo. Estoy usando la versión más reciente y está viniendo como v.4.0.20710.0. Eso debería atrapar todas las dependencias que necesita.

Además, si solía utilizar MVC3 y ahora está tratando de usar MVC4, le conviene ir a su web.config (s) y actualizar sus referencias para que apunte a la versión 4.0 de MVC. Si no está seguro, siempre puede crear una nueva aplicación MVC4 y copiar la web.config desde allí. No olvides el web.config en tus carpetas Vistas / Áreas si lo haces.

ACTUALIZACIÓN: he descubierto que lo que necesita tener es el paquete Nuget Microsoft.AspNet.Web.Optimization instalado en su proyecto. Está incluido por defecto en una aplicación MVC4 RTM independientemente de si especifica el marco de destino como 4.5 o 4.0. Este es el espacio de nombre en el que están incluidas las clases de agrupamiento, y no parece depender del marco. Implementé en un servidor que no tiene 4.5 instalado y sigue funcionando como esperaba. Solo asegúrese de que la DLL se implemente con el resto de su aplicación.

Los nombres de css deben ser consistentes.

Los nombres de jqueryUI css no son "jquery.ui.XXX" en la carpeta Contenido / temas / base.

por lo que debería ser:

incorrecto:

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

correcto:

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

Intenté en MVC5 y trabajé con éxito.

Otra cosa a considerar es que las referencias no pueden tener el mismo nombre. Por ejemplo, si tiene jQuery UI en el directorio de las libraries , y agrupe su archivo JavaScript así:

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

y luego intente agrupar sus archivos CSS así:

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

fallará Deben tener nombres únicos. Entonces haz algo como ScriptBundle("~/libraries/js")... y ScriptBundle("~/libraries/css")... o lo que sea.

Para agregar información útil a la conversación, encontré errores 404 para mis paquetes en la implementación (estuvo bien en el entorno de desarrollo local).

Para los nombres del paquete, incluyo números de versión como estos:

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

En un capricho, eliminé todos los puntos y todo estaba funcionando mágicamente de nuevo:

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

Espero que ayude a alguien a ahorrar algo de tiempo y frustración.

Solo para aclarar algunas cosas, System.Web.Optimization (también conocido como Bundling / Minification) funcionará en contra de 4.0. No depende de nada en 4.5, por lo que no debería haber problemas allí.

Si la creación de scripts funciona, y es solo un problema con CSS, ¿tal vez el problema es con las URL relativas?

Primero veré la página renderizada y veré si está obteniendo referencias al paquete CSS, es decir, algo como:

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

Si lo estás, entonces la agrupación está funcionando, pero algo dentro de tu paquete de CSS está en mal estado. Por lo general, esto se debe a que las URL relativas dentro de su paquete de CSS son incorrectas, es decir, si sus imágenes viven en ~ / Contenido, pero usted nombra su paquete ~/bundles/css , el buscador buscará imágenes incorrectamente en ~/bundles .

Además, el comportamiento predeterminado es desactivar el agrupamiento y la minificación cuando debug=true . Por lo tanto, si desea que las optimizaciones estén habilitadas incluso cuando debug=true , deberá forzar:

BundleTable.EnableOptimizations = true

Actualizado: con la nueva información que v="" , eso significa que el paquete estaba vacío, debe verificar que está agregando archivos al paquete correctamente y que los encontró. ¿Cómo está incluyendo archivos en el paquete?

Solo por la historia:

Compruebe que todos los archivos less / css mencionados en el paquete tengan Build Action = "Content".

No hay error si faltan algunos archivos del paquete en el servidor de destino.

Tuve el mismo problema y resultó ser un error estúpido, los archivos CSS no se incluyeron en el proyecto, por lo que no se publicaron, asegúrese de ver todos los archivos en la solución y agregarlos al proyecto.

Tuve este problema al agregar algunos paquetes de Nuget y olvidé hacer una actualización

Entonces, primero haga una actualización de todos los paquetes instalados en el proyecto

Update-Package

En Global.asax.cs agregue lo siguiente

BundleTable.EnableOptimizations = true;

Uno de mis archivos css tenía un carácter ''_'' en el nombre del archivo que causaba problemas.

Renombré your_style.css a yourstyle.css

Yo tuve el mismo problema . acabo de convertir

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

y funcionó. simplemente no te olvides de convertir

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

que te lo pases bien

prueba esto:

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

Me funcionó. Todavía estoy aprendiendo, y aún no me he dado cuenta de por qué está sucediendo

runAllManagedModulesForAllRequests="true" también funcionó para mí. Agregue la siguiente configuración en web.config :

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

runAllManagedModulesForAllRequests impondrá un golpe de rendimiento en su sitio web si no se usa apropiadamente. Mira este artículo .