MVC Bundling y CSS URL relativas

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

Tengo una aplicación de intranet cuyo 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 una URL incorrecta para las imágenes a las que se hace referencia en esos archivos CSS, produciendo 404 incluso los muy bien probados archivos CSS de JQueryUI (de FireBug):

Errores 404 debido a URL generada incorrectamente

por ejemplo, está generando

 http://usid01/path/foo.png 

Cuando debería estar generando:

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

¿Cómo obtengo que el sistema de agrupamiento genere una URL que apunta a la ubicación correcta?

CssRewriteUrlTransform actualiza la URL de CSS con la ruta absoluta, lo que significa 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 la carpeta –

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

Bundling generará la siguiente ruta de URL de CSS para “background-image” –

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

Y ahora, si hospeda el sitio web / aplicación web como un sitio web en el servidor web, la ruta anterior funcionará, porque el navegador enviará la solicitud de este recurso usando la siguiente URL debido a la dirección ‘/’

 http:///content/images/sandy.jpg 

pero si aloja el sitio web como aplicación web, esto creará un problema. Porque el navegador aún interpretará esto como Url absoluto en lugar de relativo y aún enviará la siguiente solicitud para recuperar este recurso:

  http:///content/images/sandy.jpg 

Entonces, la solución para este problema es usar la URL relativa incluso en el archivo CSS y luego eliminar la 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")); 

La razón de las imágenes rotas es que trata de encontrar las imágenes relativas a la nueva ruta definida durante la agrupación, es decir,

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

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

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 están siendo minificados), es decir,

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

De esta forma, 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 tanto, el problema se resolverá

El problema solo no se resolverá si mezcla los archivos de diferentes carpetas por la misma razón descrita anteriormente

Esto funciona para mí,

  
    Intereting Posts