web-dev-qa-db-fra.com

MVC Bundling et URL relatives CSS

Le regroupement de MVC renvoie la mauvaise URL dans les images CSS lors de l'utilisation de CssRewriteUrlTransform:

J'ai une application intranet dont l'URL est par exemple: http://usid01-srv002/MyApplication. Il se trouve dans le "site Web par défaut" d'IIS.

Qui a ce qui suit dans BundleConfig.cs:

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

Le système de regroupement génère la mauvaise URL pour toutes les images référencées dans ces fichiers CSS, ce qui donne même les fichiers CSS très bien testés de 404 de JQueryUI (de FireBug):

404 errors due to wrong generated URL

par exemple. ça génère

http://usid01/path/foo.png

Quand devrait-il générer:

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

Comment puis-je faire en sorte que le système de regroupement génère une URL pointant vers le bon emplacement?

cssasp.net-mvcrelative-pathasp.net-mvc-5bundling-and-minification
45
Charles Burns

CssRewriteUrlTransform met à jour l'URL CSS avec un chemin absolu, en disant que si nous utilisons -

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

et nous avons la classe CSS suivante dans "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;
}

et la structure de dossiers suivante -

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

Le regroupement générera le chemin URL CSS suivant pour "background-image" -

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

Et maintenant, si vous hébergez le site Web/l'application Web en tant que site Web sur le serveur Web ci-dessus, le chemin fonctionnera, car le navigateur enverra une demande pour cette ressource en utilisant l'URL suivante en raison du début "/"

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

mais si vous hébergez le site Web en tant qu'application Web, cela créera un problème. Parce que le navigateur interprétera toujours cela comme une URL absolue au lieu de relative et enverra toujours la demande suivante pour récupérer cette ressource -

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

Ainsi, la solution à ce problème consiste à utiliser l'URL relative même dans le fichier CSS, puis à supprimer la configuration CssRewriteUrlTransform de la configuration Bundle comme ci-dessous -

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

bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));
49
Bhalchandra K

La raison du images cassées est qu'il essaie de trouver les images par rapport au nouveau chemin défini lors du regroupement i.e.

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

Donc, s'il y a un chemin d'image (c'est-à-dire une image d'arrière-plan) défini dans style.css, il essaiera d'obtenir son chemin par rapport à Content/woothemes au lieu de Content/woothemes/css /, donc les images ne seront pas trouvées

Une solution de contournement pour résoudre le problème pour les fichiers du même dossier consiste à définir le nouveau chemin d'accès comme celui du dossier (dont les fichiers sont en cours de minification), c'est-à-dire.

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

De cette façon, les fichiers regroupés et le chemin des fichiers réels correspondront et les images définies dans le CSS seront trouvées, d'où le problème sera résolu

Le problème ne sera pas résolu uniquement si vous mélangez les fichiers de différents dossiers pour la même raison décrite ci-dessus

7
Muhammad Waqas Iqbal

Cela fonctionne pour moi,

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