En la aplicación ASP.NET MVC5, tengo varios archivos CSS y JS que estoy tratando de agrupar usando el siguiente código

bundles.Add(new StyleBundle("~/myBundles/css").Include(
          "~/lib/css/nivo-slider.css",
          "~/css/core.css",
          "~/css/shortcode/shortcodes.css",
          "~/style.css",
          "~/css/responsive.css",
          "~/css/color/color-core.css",
          "~/css/custom.css",
          "~/myDefaultSS.css"
          ));

Lo uso en la página _Layout como esta:

@Styles.Render("~/myBundles/css")

Cuando lo uso, veo a continuación en la fuente hmlt de mi página

<link href="/myBundles/css?v=xt5fim6H60Umm4DuM_5iVudeIEOkrcbgXzG0o3CHtlU1" rel="stylesheet"/>

Después de usar esto, mis páginas web no se muestran correctamente. Creo que es porque estoy agrupando archivos de diferentes directorios. ¿Está bien? ¿Cómo puedo resolver el problema?

1
FLICKER 15 ene. 2017 a las 10:07
No, las carpetas pueden estar en diferentes ubicaciones. ¿Cómo agrega esto a su página de diseño? por favor proporcione su código
 – 
S.Serpooshan
15 ene. 2017 a las 10:37
¿Podría comprobar la fuente de la página de su sitio cuando se carga en el navegador? ¿Incluye los archivos CSS adecuados como mencionaste en tu paquete? por ejemplo: <link href="/lib/css/nivo-slider.css" rel="stylesheet"/> ...
 – 
S.Serpooshan
15 ene. 2017 a las 10:42
Fuente de página agregada
 – 
FLICKER
15 ene. 2017 a las 10:44
¿Qué pasa si abre ese enlace en su navegador? /myBundles/css?v=xt5fim6H60Umm4DuM_5iVudeIEOkrcbgXzG0o3CHtlU1. parece que está optimizado para tener un enlace CSS. Pruebe si establece debug = true como: <compilation debug="true" targetFramework=.../> en web.config:<configuration><system.web>
 – 
S.Serpooshan
15 ene. 2017 a las 10:58
Abre un archivo css.txt en el bloc de notas. contiene todos esos archivos css en un solo lugar.
 – 
FLICKER
15 ene. 2017 a las 11:04

1 respuesta

La mejor respuesta

No use @import directivas CSS al agrupar estilos. Si publica una versión de lanzamiento de su sitio, no funcionó. Si inspecciona el tráfico de la red [F12], verá que el archivo css importado no se encuentra en la red, porque la optimización no reemplaza la URL de @import con la ruta correcta.

Por lo tanto, no utilice la agrupación con archivos css importados O desactive la optimización de agrupación y optimícelos de otra manera.

La optimización se puede desactivar con la siguiente línea en Web.Config:

<compilation debug="true" targetFramework="4.5"/>

Además, puede usar este código en C #:

BundleTable.EnableOptimizations = false;

[Referencia]

1
S.Serpooshan 15 ene. 2017 a las 11:49
Hice esto, pero en HTML genera múltiples referencias, no solo una. en este caso, ¿cuál es el punto de tener un paquete?
 – 
FLICKER
15 ene. 2017 a las 12:20
En realidad, el html renderizado no es tan importante para el codificador, pero los paquetes mantienen su código más limpio y agregan la capacidad de agregar contenido selectivo en diferentes condiciones.
 – 
S.Serpooshan
15 ene. 2017 a las 13:29