css - net - bundling and minification in mvc 5 example

MVC Bundling y URL relativas de CSS

Question

La agrupación de MVC está devolviendo la URL incorrecta en las imágenes CSS al usar CssRewriteUrlTransform:

Tengo una aplicación de intranet cuya URL es, por ejemplo: http://usid01-srv002/MyApplication . Está en el "sitio web predeterminado" de IIS.

Que tiene lo siguiente en BundleConfig.cs :

bundles.Add(new StyleBundle("~/bundles/jcss")
.Include("~/Scripts/JQueryUI/css/*.css", new CssRewriteUrlTransform())
);

El sistema de agrupación está generando la URL incorrecta para las imágenes a las que se hace referencia en esos archivos CSS, produciendo los archivos CSS muy bien probados de 404 de JQueryUI (de FireBug):

por ejemplo, se está generando

http://usid01/path/foo.png

Cuando se debe generar:

http://usid01/MyApplication/path/foo.png

¿Cómo consigo que el sistema de agrupación genere una URL que apunte a la ubicación correcta?

Answer 1

CssRewriteUrlTransform actualiza la URL de CSS con una ruta absoluta, diciendo que si usamos -

bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css",new CssRewriteUrlTransform()));

y tenemos la siguiente clase de CSS en "site.css"

.Sandy
{
background-image: url("Images/Sandy.jpg");
border: 1px solid #c8c8c8;
border-radius:4px 4px 4px 4px;
box-shadow: 1px 1px 8px gray;
background-position:left;
background-size:contain;
-moz-background-size:contain;
-webkit-background-size:contain;
-o-background-size:contain;
background-repeat:no-repeat;
min-height:100px;
min-width:100px;
display:block;
}

y siguiendo la estructura de carpetas -

 -Web site Root
-Content
--site.css
--Images
---Sandy.jpg

El agrupamiento generará la siguiente ruta de la URL de CSS para "background-image" -

 background-image: url("/Content/Images/Sandy.jpg");

Y ahora, si aloja el sitio web o la aplicación web como un sitio web en el servidor web, la ruta de acceso funcionará, ya que el navegador enviará una solicitud de este recurso utilizando la siguiente URL, debido a "/ ''

http://<server>/content/images/sandy.jpg

pero si aloja el sitio web como aplicación web, esto creará un problema. Debido a que el navegador todavía interpretará esto como una URL absoluta en lugar de relativa y seguirá enviando la siguiente solicitud para obtener este recurso

 http://<server>/content/images/sandy.jpg

Por lo tanto, la solución para este problema es usar la URL relativa incluso en el archivo CSS y luego eliminar el CssRewriteUrlTransform de la configuración del paquete como se muestra a continuación:

background-image: url("Images/Sandy.jpg");
bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));

Answer 2

El motivo de las imágenes rotas es que intenta encontrar las imágenes en relación con la nueva ruta definida durante el agrupamiento, es decir,

bundles.Add(new StyleBundle("~/Content/woothemes").Include( "~/Content/woothemes/css/style.css", ));

Entonces, si hay alguna ruta de imagen (es decir, imagen de fondo) definida en style.css, intentará obtener su ruta relativa a Contenido / woothemes en lugar de Contenido / woothemes / css / , por lo tanto, no se encontrarán las imágenes

Una solución para superar el problema de los archivos de la misma carpeta es definir la nueva ruta igual que la de la carpeta (cuyos archivos se están reduciendo), es decir

bundles.Add(new StyleBundle("~/Content/woothemes/css").Include( "~/Content/woothemes/css/style.css", ));

De esta manera, los archivos agrupados y la ruta real de los archivos coincidirán y se encontrarán las imágenes definidas en el css, por lo que el problema se resolverá

El problema solo no se resolverá si mezcla los archivos de diferentes carpetas por el mismo motivo descrito anteriormente

Answer 3

Esto funciona para mi

<link href="@System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/content/styles/css")" rel="stylesheet" type="text/css" />