MVC4 StyleBundle ne résout pas les images

Ma question est similaire à ceci:

ASP.NET MVC 4 Minification & Images d'arrière-plan

Sauf que je veux m'en tenir au propre groupement de MVC si je le peux. J'ai un crash cérébral essayant de comprendre quel est le modèle correct pour spécifier des ensembles de styles tels que les ensembles d'images et de CSS autonomes tels que l'interface utilisateur jQuery.

J'ai une structure de site MVC typique avec /Content/css/laquelle contient mon CSS de base tel que styles.css. Dans ce dossier CSS, j'ai également des sous-dossiers tels que celui /jquery-uiqui contient son fichier CSS plus un /imagesdossier. Les chemins des images dans jQuery UI CSS sont relatifs à ce dossier et je ne veux pas les déranger.

Si je comprends bien, lorsque je spécifie un, StyleBundleje dois spécifier un chemin virtuel qui ne correspond pas également à un vrai chemin de contenu, car (en supposant que j'ignore les routes vers le contenu) IIS essaierait alors de résoudre ce chemin en tant que fichier physique. Je précise donc:

bundles.Add(new StyleBundle("~/Content/styles/jquery-ui")
       .Include("~/Content/css/jquery-ui/*.css"));

rendu en utilisant:

@Styles.Render("~/Content/styles/jquery-ui")

Je peux voir la demande envoyée à:

http://localhost/MySite/Content/styles/jquery-ui?v=nL_6HPFtzoqrts9nwrtjq0VQFYnhMjY5EopXsK8cxmg1

Cela renvoie la réponse CSS correcte et réduite. Mais alors le navigateur envoie une demande pour une image relativement liée comme:

http://localhost/MySite/Content/styles/images/ui-bg_highlight-soft_100_eeeeee_1x100.png

Qui est un 404 .

Je comprends que la dernière partie de mon URL jquery-uiest une URL sans extension, un gestionnaire pour mon bundle, donc je peux voir pourquoi la demande relative pour l'image est simplement/styles/images/ .

Donc ma question est quelle est la bonne façon de gérer cette situation?

Selon ce fil sur le regroupement css MVC4 et les références d'image , si vous définissez votre bundle comme:

bundles.Add(new StyleBundle("~/Content/css/jquery-ui/bundle")
                   .Include("~/Content/css/jquery-ui/*.css"));

Lorsque vous définissez le regroupement sur le même chemin que les fichiers source qui ont constitué le regroupement, les chemins d'accès relatifs à l'image continueront de fonctionner. La dernière partie du chemin du bundle est vraiment celle file namede ce bundle spécifique (c'est-à-dire, /bundlepeut être n'importe quel nom que vous aimez).

Cela ne fonctionnera que si vous regroupez des CSS à partir du même dossier (ce qui, je pense, est logique du point de vue du regroupement).

Mettre à jour

Selon le commentaire ci-dessous de @Hao Kung, cela peut désormais être réalisé en appliquant un CssRewriteUrlTransformation( Modifier les références d'URL relatives aux fichiers CSS lorsqu'ils sont regroupés ).

REMARQUE: je n'ai pas confirmé les commentaires concernant les problèmes de réécriture vers des chemins absolus dans un répertoire virtuel, donc cela peut ne pas fonctionner pour tout le monde (?).

bundles.Add(new StyleBundle("~/Content/css/jquery-ui/bundle")
                   .Include("~/Content/css/jquery-ui/*.css",
                    new CssRewriteUrlTransform()));

La solution Grinn / ThePirat fonctionne bien.

Je n'aimais pas le fait qu'elle ait créé la méthode Include sur le bundle et qu'elle ait créé des fichiers temporaires dans le répertoire de contenu. (ils ont fini par être enregistrés, déployés, alors le service ne démarre pas!)

Donc, pour suivre la conception de Bundling, j'ai choisi de réaliser essentiellement le même code, mais dans une implémentation IBundleTransform ::

class StyleRelativePathTransform
    : IBundleTransform
{
    public StyleRelativePathTransform()
    {
    }

    public void Process(BundleContext context, BundleResponse response)
    {
        response.Content = String.Empty;

        Regex pattern = new Regex(@"url\s*\(\s*([""']?)([^:)]+)\1\s*\)", RegexOptions.IgnoreCase);
        // open each of the files
        foreach (FileInfo cssFileInfo in response.Files)
        {
            if (cssFileInfo.Exists)
            {
                // apply the RegEx to the file (to change relative paths)
                string contents = File.ReadAllText(cssFileInfo.FullName);
                MatchCollection matches = pattern.Matches(contents);
                // Ignore the file if no match 
                if (matches.Count > 0)
                {
                    string cssFilePath = cssFileInfo.DirectoryName;
                    string cssVirtualPath = context.HttpContext.RelativeFromAbsolutePath(cssFilePath);
                    foreach (Match match in matches)
                    {
                        // this is a path that is relative to the CSS file
                        string relativeToCSS = match.Groups[2].Value;
                        // combine the relative path to the cssAbsolute
                        string absoluteToUrl = Path.GetFullPath(Path.Combine(cssFilePath, relativeToCSS));

                        // make this server relative
                        string serverRelativeUrl = context.HttpContext.RelativeFromAbsolutePath(absoluteToUrl);

                        string quote = match.Groups[1].Value;
                        string replace = String.Format("url({0}{1}{0})", quote, serverRelativeUrl);
                        contents = contents.Replace(match.Groups[0].Value, replace);
                    }
                }
                // copy the result into the response.
                response.Content = String.Format("{0}\r\n{1}", response.Content, contents);
            }
        }
    }
}

Et puis enveloppé cela dans une implémentation de bundle:

public class StyleImagePathBundle 
    : Bundle
{
    public StyleImagePathBundle(string virtualPath)
        : base(virtualPath)
    {
        base.Transforms.Add(new StyleRelativePathTransform());
        base.Transforms.Add(new CssMinify());
    }

    public StyleImagePathBundle(string virtualPath, string cdnPath)
        : base(virtualPath, cdnPath)
    {
        base.Transforms.Add(new StyleRelativePathTransform());
        base.Transforms.Add(new CssMinify());
    }
}

Exemple d'utilisation:

static void RegisterBundles(BundleCollection bundles)
{
...
    bundles.Add(new StyleImagePathBundle("~/bundles/Bootstrap")
            .Include(
                "~/Content/css/bootstrap.css",
                "~/Content/css/bootstrap-responsive.css",
                "~/Content/css/jquery.fancybox.css",
                "~/Content/css/style.css",
                "~/Content/css/error.css",
                "~/Content/validation.css"
            ));

Voici ma méthode d'extension pour RelativeFromAbsolutePath:

   public static string RelativeFromAbsolutePath(this HttpContextBase context, string path)
    {
        var request = context.Request;
        var applicationPath = request.PhysicalApplicationPath;
        var virtualDir = request.ApplicationPath;
        virtualDir = virtualDir == "/" ? virtualDir : (virtualDir + "/");
        return path.Replace(applicationPath, virtualDir).Replace(@"\", "/");
    }

Mieux encore (à mon humble avis) implémentez un bundle personnalisé qui corrige les chemins d'image. J'en ai écrit un pour mon application.

using System;
using System.Collections.Generic;
using IO = System.IO;
using System.Linq;
using System.Text.RegularExpressions;
using System.Web;
using System.Web.Optimization;

...

public class StyleImagePathBundle : Bundle
{
    public StyleImagePathBundle(string virtualPath)
        : base(virtualPath, new IBundleTransform[1]
      {
        (IBundleTransform) new CssMinify()
      })
    {
    }

    public StyleImagePathBundle(string virtualPath, string cdnPath)
        : base(virtualPath, cdnPath, new IBundleTransform[1]
      {
        (IBundleTransform) new CssMinify()
      })
    {
    }

    public new Bundle Include(params string[] virtualPaths)
    {
        if (HttpContext.Current.IsDebuggingEnabled)
        {
            // Debugging. Bundling will not occur so act normal and no one gets hurt.
            base.Include(virtualPaths.ToArray());
            return this;
        }

        // In production mode so CSS will be bundled. Correct image paths.
        var bundlePaths = new List<string>();
        var svr = HttpContext.Current.Server;
        foreach (var path in virtualPaths)
        {
            var pattern = new Regex(@"url\s*\(\s*([""']?)([^:)]+)\1\s*\)", RegexOptions.IgnoreCase);
            var contents = IO.File.ReadAllText(svr.MapPath(path));
            if(!pattern.IsMatch(contents))
            {
                bundlePaths.Add(path);
                continue;
            }


            var bundlePath = (IO.Path.GetDirectoryName(path) ?? string.Empty).Replace(@"\", "/") + "/";
            var bundleUrlPath = VirtualPathUtility.ToAbsolute(bundlePath);
            var bundleFilePath = String.Format("{0}{1}.bundle{2}",
                                               bundlePath,
                                               IO.Path.GetFileNameWithoutExtension(path),
                                               IO.Path.GetExtension(path));
            contents = pattern.Replace(contents, "url($1" + bundleUrlPath + "$2$1)");
            IO.File.WriteAllText(svr.MapPath(bundleFilePath), contents);
            bundlePaths.Add(bundleFilePath);
        }
        base.Include(bundlePaths.ToArray());
        return this;
    }

}

Pour l'utiliser, faites:

bundles.Add(new StyleImagePathBundle("~/bundles/css").Include(
  "~/This/Is/Some/Folder/Path/layout.css"));

...au lieu de...

bundles.Add(new StyleBundle("~/bundles/css").Include(
  "~/This/Is/Some/Folder/Path/layout.css"));

Ce qu'il fait est (lorsqu'il n'est pas en mode débogage) le recherche url(<something>)et le remplace par url(<absolute\path\to\something>). J'ai écrit la chose il y a environ 10 secondes, donc elle pourrait avoir besoin d'un petit ajustement. J'ai pris en compte les URL pleinement qualifiées et les DataURI base64 en m'assurant qu'il n'y a pas de deux-points (:) dans le chemin de l'URL. Dans notre environnement, les images résident normalement dans le même dossier que leurs fichiers css, mais je l'ai testé avec les dossiers parents ( url(../someFile.png)) et les dossiers enfants ( url(someFolder/someFile.png).

Il n'est pas nécessaire de spécifier une transformation ou d'avoir des chemins de sous-répertoire fous. Après beaucoup de dépannage, je l'ai isolé à cette règle "simple" (est-ce un bug?) ...

Si le chemin de votre ensemble ne commence pas par la racine relative des éléments inclus, la racine de l'application Web ne sera pas prise en compte.

Cela ressemble plus à un bug pour moi, mais de toute façon c'est comme ça que vous le corrigez avec la version actuelle de .NET 4.51. Peut-être que les autres réponses étaient nécessaires sur les anciennes versions d'ASP.NET, je ne peux pas dire que je n'ai pas le temps de tester rétrospectivement tout cela.

Pour clarifier, voici un exemple:

J'ai ces fichiers ...

~/Content/Images/Backgrounds/Some_Background_Tile.gif
~/Content/Site.css  - references the background image relatively, i.e. background: url('Images/...')

Ensuite, configurez le bundle comme ...

BundleTable.Add(new StyleBundle("~/Bundles/Styles").Include("~/Content/Site.css"));

Et le rendre comme ...

@Styles.Render("~/Bundles/Styles")

Et obtenez le "comportement" (bug), les fichiers CSS eux-mêmes ont la racine de l'application (par exemple "http: // localhost: 1234 / MySite / Content / Site.css") mais l'image CSS dans tous les start "/ Content / Images / ... "ou" / Images / ... "selon que j'ajoute ou non la transformation.

J'ai même essayé de créer le dossier "Bundles" pour voir s'il s'agissait du chemin existant ou non, mais cela n'a rien changé. La solution au problème est vraiment l'exigence que le nom du bundle commence par la racine du chemin.

Ce qui signifie que cet exemple est corrigé en enregistrant et en rendant le chemin du bundle comme ..

BundleTable.Add(new StyleBundle("~/Content/StylesBundle").Include("~/Content/Site.css"));
...
@Styles.Render("~/Content/StylesBundle")

Donc, bien sûr, vous pouvez dire que c'est RTFM, mais je suis sûr que moi et d'autres avons choisi ce chemin "~ / Bundles / ..." à partir du modèle par défaut ou quelque part dans la documentation sur le site Web MSDN ou ASP.NET, ou je suis juste tombé dessus parce qu'en fait, c'est un nom assez logique pour un chemin virtuel et il est logique de choisir de tels chemins virtuels qui n'entrent pas en conflit avec de vrais répertoires.

Quoi qu'il en soit, c'est comme ça. Microsoft ne voit aucun bogue. Je ne suis pas d'accord avec cela, soit cela devrait fonctionner comme prévu, soit une exception devrait être levée, ou un remplacement supplémentaire pour ajouter le chemin du bundle qui opte pour inclure la racine de l'application ou non. Je ne peux pas imaginer pourquoi quelqu'un ne voudrait pas que la racine de l'application soit incluse quand il y en a une (normalement sauf si vous avez installé votre site Web avec un alias DNS / racine de site Web par défaut). Donc, en fait, cela devrait être la valeur par défaut.

J'ai trouvé que CssRewriteUrlTransform ne s'exécute pas si vous faites référence à un *.cssfichier et que vous avez le *.min.cssfichier associé dans le même dossier.

Pour résoudre ce problème, supprimez le *.min.cssfichier ou référencez-le directement dans votre bundle:

bundles.Add(new Bundle("~/bundles/bootstrap")
    .Include("~/Libs/bootstrap3/css/bootstrap.min.css", new CssRewriteUrlTransform()));

Après cela, vos URL seront transformées correctement et vos images devraient être correctement résolues.

Peut-être que je suis biaisé, mais j'aime bien ma solution car elle ne fait aucune transformation, regex, etc. et elle a le moins de code :)

Cela fonctionne pour un site hébergé en tant que répertoire virtuel dans un site Web IIS et en tant que site Web racine sur IIS

J'ai donc créé une implantation d' IItemTransformencapsulé le CssRewriteUrlTransformet utilisé VirtualPathUtilitypour fixer le chemin d'accès et appeler le code existant:

/// <summary>
/// Is a wrapper class over CssRewriteUrlTransform to fix url's in css files for sites on IIS within Virutal Directories
/// and sites at the Root level
/// </summary>
public class CssUrlTransformWrapper : IItemTransform
{
    private readonly CssRewriteUrlTransform _cssRewriteUrlTransform;

    public CssUrlTransformWrapper()
    {
        _cssRewriteUrlTransform = new CssRewriteUrlTransform();
    }

    public string Process(string includedVirtualPath, string input)
    {
        return _cssRewriteUrlTransform.Process("~" + VirtualPathUtility.ToAbsolute(includedVirtualPath), input);
    }
}


//App_Start.cs
public static void Start()
{
      BundleTable.Bundles.Add(new StyleBundle("~/bundles/fontawesome")
                         .Include("~/content/font-awesome.css", new CssUrlTransformWrapper()));
}

Semble bien fonctionner pour moi?

Bien que la réponse de Chris Baxter aide à résoudre le problème d'origine, cela ne fonctionne pas dans mon cas lorsque l'application est hébergée dans un répertoire virtuel . Après avoir étudié les options, j'ai terminé avec une solution de bricolage.

ProperStyleBundleLa classe inclut du code emprunté à l'original CssRewriteUrlTransformpour transformer correctement les chemins relatifs dans le répertoire virtuel. Il lance également si le fichier n'existe pas et empêche la réorganisation des fichiers dans le bundle (code extrait de BetterStyleBundle).

using System;
using System.Collections.Generic;
using System.IO;
using System.Text.RegularExpressions;
using System.Web;
using System.Web.Optimization;
using System.Linq;

namespace MyNamespace
{
    public class ProperStyleBundle : StyleBundle
    {
        public override IBundleOrderer Orderer
        {
            get { return new NonOrderingBundleOrderer(); }
            set { throw new Exception( "Unable to override Non-Ordered bundler" ); }
        }

        public ProperStyleBundle( string virtualPath ) : base( virtualPath ) {}

        public ProperStyleBundle( string virtualPath, string cdnPath ) : base( virtualPath, cdnPath ) {}

        public override Bundle Include( params string[] virtualPaths )
        {
            foreach ( var virtualPath in virtualPaths ) {
                this.Include( virtualPath );
            }
            return this;
        }

        public override Bundle Include( string virtualPath, params IItemTransform[] transforms )
        {
            var realPath = System.Web.Hosting.HostingEnvironment.MapPath( virtualPath );
            if( !File.Exists( realPath ) )
            {
                throw new FileNotFoundException( "Virtual path not found: " + virtualPath );
            }
            var trans = new List<IItemTransform>( transforms ).Union( new[] { new ProperCssRewriteUrlTransform( virtualPath ) } ).ToArray();
            return base.Include( virtualPath, trans );
        }

        // This provides files in the same order as they have been added. 
        private class NonOrderingBundleOrderer : IBundleOrderer
        {
            public IEnumerable<BundleFile> OrderFiles( BundleContext context, IEnumerable<BundleFile> files )
            {
                return files;
            }
        }

        private class ProperCssRewriteUrlTransform : IItemTransform
        {
            private readonly string _basePath;

            public ProperCssRewriteUrlTransform( string basePath )
            {
                _basePath = basePath.EndsWith( "/" ) ? basePath : VirtualPathUtility.GetDirectory( basePath );
            }

            public string Process( string includedVirtualPath, string input )
            {
                if ( includedVirtualPath == null ) {
                    throw new ArgumentNullException( "includedVirtualPath" );
                }
                return ConvertUrlsToAbsolute( _basePath, input );
            }

            private static string RebaseUrlToAbsolute( string baseUrl, string url )
            {
                if ( string.IsNullOrWhiteSpace( url )
                     || string.IsNullOrWhiteSpace( baseUrl )
                     || url.StartsWith( "/", StringComparison.OrdinalIgnoreCase )
                     || url.StartsWith( "data:", StringComparison.OrdinalIgnoreCase )
                    ) {
                    return url;
                }
                if ( !baseUrl.EndsWith( "/", StringComparison.OrdinalIgnoreCase ) ) {
                    baseUrl = baseUrl + "/";
                }
                return VirtualPathUtility.ToAbsolute( baseUrl + url );
            }

            private static string ConvertUrlsToAbsolute( string baseUrl, string content )
            {
                if ( string.IsNullOrWhiteSpace( content ) ) {
                    return content;
                }
                return new Regex( "url\\(['\"]?(?<url>[^)]+?)['\"]?\\)" )
                    .Replace( content, ( match =>
                                         "url(" + RebaseUrlToAbsolute( baseUrl, match.Groups["url"].Value ) + ")" ) );
            }
        }
    }
}

Utilisez-le comme StyleBundle:

bundles.Add( new ProperStyleBundle( "~/styles/ui" )
    .Include( "~/Content/Themes/cm_default/style.css" )
    .Include( "~/Content/themes/custom-theme/jquery-ui-1.8.23.custom.css" )
    .Include( "~/Content/DataTables-1.9.4/media/css/jquery.dataTables.css" )
    .Include( "~/Content/DataTables-1.9.4/extras/TableTools/media/css/TableTools.css" ) );

Depuis la v1.1.0-alpha1 (package de pré-version), le framework utilise le VirtualPathProvider pour accéder aux fichiers plutôt que de toucher le système de fichiers physique.

Le transformateur mis à jour peut être vu ci-dessous:

public class StyleRelativePathTransform
    : IBundleTransform
{
    public void Process(BundleContext context, BundleResponse response)
    {
        Regex pattern = new Regex(@"url\s*\(\s*([""']?)([^:)]+)\1\s*\)", RegexOptions.IgnoreCase);

        response.Content = string.Empty;

        // open each of the files
        foreach (var file in response.Files)
        {
            using (var reader = new StreamReader(file.Open()))
            {
                var contents = reader.ReadToEnd();

                // apply the RegEx to the file (to change relative paths)
                var matches = pattern.Matches(contents);

                if (matches.Count > 0)
                {
                    var directoryPath = VirtualPathUtility.GetDirectory(file.VirtualPath);

                    foreach (Match match in matches)
                    {
                        // this is a path that is relative to the CSS file
                        var imageRelativePath = match.Groups[2].Value;

                        // get the image virtual path
                        var imageVirtualPath = VirtualPathUtility.Combine(directoryPath, imageRelativePath);

                        // convert the image virtual path to absolute
                        var quote = match.Groups[1].Value;
                        var replace = String.Format("url({0}{1}{0})", quote, VirtualPathUtility.ToAbsolute(imageVirtualPath));
                        contents = contents.Replace(match.Groups[0].Value, replace);
                    }

                }
                // copy the result into the response.
                response.Content = String.Format("{0}\r\n{1}", response.Content, contents);
            }
        }
    }
}

Voici une transformation d'ensemble qui remplacera les URL css par des URL relatives à ce fichier css. Ajoutez-le simplement à votre ensemble et cela devrait résoudre le problème.

public class CssUrlTransform: IBundleTransform
{
    public void Process(BundleContext context, BundleResponse response) {
        Regex exp = new Regex(@"url\([^\)]+\)", RegexOptions.IgnoreCase | RegexOptions.Singleline);
        foreach (FileInfo css in response.Files) {
            string cssAppRelativePath = css.FullName.Replace(context.HttpContext.Request.PhysicalApplicationPath, context.HttpContext.Request.ApplicationPath).Replace(Path.DirectorySeparatorChar, '/');
            string cssDir = cssAppRelativePath.Substring(0, cssAppRelativePath.LastIndexOf('/'));
            response.Content = exp.Replace(response.Content, m => TransformUrl(m, cssDir));
        }
    }


    private string TransformUrl(Match match, string cssDir) {
        string url = match.Value.Substring(4, match.Length - 5).Trim('\'', '"');

        if (url.StartsWith("http://") || url.StartsWith("data:image")) return match.Value;

        if (!url.StartsWith("/"))
            url = string.Format("{0}/{1}", cssDir, url);

        return string.Format("url({0})", url);
    }

}

Une autre option consisterait à utiliser le module de réécriture d'URL IIS pour mapper le dossier d'images d'ensemble virtuel au dossier d'images physiques. Vous trouverez ci-dessous un exemple de règle de réécriture que vous pourriez utiliser pour un ensemble appelé "~ / ensembles / votre page / styles" - notez les correspondances d'expression régulière sur les caractères alphanumériques ainsi que les traits d'union, les traits de soulignement et les points, qui sont courants dans les noms de fichiers image .

<rewrite>
  <rules>
    <rule name="Bundle Images">
      <match url="^bundles/yourpage/images/([a-zA-Z0-9\-_.]+)" />
      <action type="Rewrite" url="Content/css/jquery-ui/images/{R:1}" />
    </rule>
  </rules>
</rewrite>

Cette approche crée un petit surcoût supplémentaire, mais vous permet d'avoir plus de contrôle sur les noms de vos bundles, et réduit également le nombre de bundles que vous devrez peut-être référencer sur une page. Bien sûr, si vous devez référencer plusieurs fichiers css tiers contenant des références de chemin d'image relatives, vous ne pouvez toujours pas contourner la création de plusieurs ensembles.

La solution Grinn est excellente.

Cependant, cela ne fonctionne pas pour moi lorsqu'il y a des références relatives au dossier parent dans l'URL. c'est à direurl('../../images/car.png')

J'ai donc légèrement modifié la Includeméthode afin de résoudre les chemins pour chaque correspondance d'expressions régulières, en permettant des chemins relatifs et en option pour intégrer les images dans le CSS.

J'ai également changé l'IF DEBUG pour vérifier BundleTable.EnableOptimizationsau lieu de HttpContext.Current.IsDebuggingEnabled.

    public new Bundle Include(params string[] virtualPaths)
    {
        if (!BundleTable.EnableOptimizations)
        {
            // Debugging. Bundling will not occur so act normal and no one gets hurt. 
            base.Include(virtualPaths.ToArray());
            return this;
        }
        var bundlePaths = new List<string>();
        var server = HttpContext.Current.Server;
        var pattern = new Regex(@"url\s*\(\s*([""']?)([^:)]+)\1\s*\)", RegexOptions.IgnoreCase);
        foreach (var path in virtualPaths)
        {
            var contents = File.ReadAllText(server.MapPath(path));
            var matches = pattern.Matches(contents);
            // Ignore the file if no matches
            if (matches.Count == 0)
            {
                bundlePaths.Add(path);
                continue;
            }
            var bundlePath = (System.IO.Path.GetDirectoryName(path) ?? string.Empty).Replace(@"\", "/") + "/";
            var bundleUrlPath = VirtualPathUtility.ToAbsolute(bundlePath);
            var bundleFilePath = string.Format("{0}{1}.bundle{2}",
                                               bundlePath,
                                               System.IO.Path.GetFileNameWithoutExtension(path),
                                               System.IO.Path.GetExtension(path));
            // Transform the url (works with relative path to parent folder "../")
            contents = pattern.Replace(contents, m =>
            {
                var relativeUrl = m.Groups[2].Value;
                var urlReplace = GetUrlReplace(bundleUrlPath, relativeUrl, server);
                return string.Format("url({0}{1}{0})", m.Groups[1].Value, urlReplace);
            });
            File.WriteAllText(server.MapPath(bundleFilePath), contents);
            bundlePaths.Add(bundleFilePath);
        }
        base.Include(bundlePaths.ToArray());
        return this;
    }


    private string GetUrlReplace(string bundleUrlPath, string relativeUrl, HttpServerUtility server)
    {
        // Return the absolute uri
        Uri baseUri = new Uri("http://dummy.org");
        var absoluteUrl = new Uri(new Uri(baseUri, bundleUrlPath), relativeUrl).AbsolutePath;
        var localPath = server.MapPath(absoluteUrl);
        if (IsEmbedEnabled && File.Exists(localPath))
        {
            var fi = new FileInfo(localPath);
            if (fi.Length < 0x4000)
            {
                // Embed the image in uri
                string contentType = GetContentType(fi.Extension);
                if (null != contentType)
                {
                    var base64 = Convert.ToBase64String(File.ReadAllBytes(localPath));
                    // Return the serialized image
                    return string.Format("data:{0};base64,{1}", contentType, base64);
                }
            }
        }
        // Return the absolute uri 
        return absoluteUrl;
    }

J'espère que ça aide, salut.

Vous pouvez simplement ajouter un autre niveau de profondeur à votre chemin de bundle virtuel

    //Two levels deep bundle path so that paths are maintained after minification
    bundles.Add(new StyleBundle("~/Content/css/css").Include("~/Content/bootstrap/bootstrap.css", "~/Content/site.css"));

C'est une réponse super low-tech et une sorte de hack mais cela fonctionne et ne nécessitera aucun prétraitement. Étant donné la longueur et la complexité de certaines de ces réponses, je préfère le faire de cette façon.

J'ai eu ce problème avec des bundles ayant un chemin d'accès aux images incorrect et CssRewriteUrlTransformne résolvant pas ..correctement les chemins parent relatifs (il y avait aussi un problème avec les ressources externes comme les polices Web). C'est pourquoi j'ai écrit cette transformation personnalisée (semble faire tout ce qui précède correctement):

public class CssRewriteUrlTransform2 : IItemTransform
{
    public string Process(string includedVirtualPath, string input)
    {
        var pathParts = includedVirtualPath.Replace("~/", "/").Split('/');
        pathParts = pathParts.Take(pathParts.Count() - 1).ToArray();
        return Regex.Replace
        (
            input,
            @"(url\(['""]?)((?:\/??\.\.)*)(.*?)(['""]?\))",
            m => 
            {
                // Somehow assigning this to a variable is faster than directly returning the output
                var output =
                (
                    // Check if it's an aboslute url or base64
                    m.Groups[3].Value.IndexOf(':') == -1 ?
                    (
                        m.Groups[1].Value +
                        (
                            (
                                (
                                    m.Groups[2].Value.Length > 0 ||
                                    !m.Groups[3].Value.StartsWith('/')
                                )
                            ) ?
                            string.Join("/", pathParts.Take(pathParts.Count() - m.Groups[2].Value.Count(".."))) :
                            ""
                        ) +
                        (!m.Groups[3].Value.StartsWith('/') ? "/" + m.Groups[3].Value : m.Groups[3].Value) +
                        m.Groups[4].Value
                    ) :
                    m.Groups[0].Value
                );
                return output;
            }
        );
    }
}

Edit: je ne l'ai pas réalisé, mais j'ai utilisé des méthodes d'extension personnalisées dans le code. Le code source de ceux-ci est:

/// <summary>
/// Based on: http://stackoverflow.com/a/11773674
/// </summary>
public static int Count(this string source, string substring)
{
    int count = 0, n = 0;

    while ((n = source.IndexOf(substring, n, StringComparison.InvariantCulture)) != -1)
    {
        n += substring.Length;
        ++count;
    }
    return count;
}

public static bool StartsWith(this string source, char value)
{
    if (source.Length == 0)
    {
        return false;
    }
    return source[0] == value;
}

Bien sûr, il devrait être possible de le remplacer String.StartsWith(char)par String.StartsWith(string).

Après une petite enquête, j'ai conclu ce qui suit: Vous avez 2 options:

1. aller avec des transformations. Package très utile pour cela: https://bundletransformer.codeplex.com/ vous avez besoin de la transformation suivante pour chaque bundle problématique:

   BundleResolver.Current = new CustomBundleResolver();
   var cssTransformer = new StyleTransformer();
   standardCssBundle.Transforms.Add(cssTransformer);
   bundles.Add(standardCssBundle);

Avantages: de cette solution, vous pouvez nommer votre bundle comme vous le souhaitez => vous pouvez combiner des fichiers css en un seul bundle à partir de répertoires différents. Inconvénients: vous devez transformer chaque bundle problématique

2. Utilisez la même racine relative pour le nom du bundle, comme l'emplacement du fichier css. Avantages: aucune transformation n'est nécessaire. Inconvénients: Vous avez des limites sur la combinaison de feuilles CSS de différents répertoires en un seul paquet.

CssRewriteUrlTransformrésolu mon problème.
Si votre code ne charge toujours pas les images après utilisation CssRewriteUrlTransform, changez le nom de votre fichier CSS à partir de:

.Include("~/Content/jquery/jquery-ui-1.10.3.custom.css", new CssRewriteUrlTransform())

À:

.Include("~/Content/jquery/jquery-ui.css", new CssRewriteUrlTransform())

D'une certaine manière. (Les points) ne reconnaissent pas dans l'url.

N'oubliez pas de corriger plusieurs inclusions CSS dans un ensemble, telles que:

bundles.Add(new StyleBundle("~/Content/styles/jquery-ui")
    .Include("~/Content/css/path1/somestyle1.css", "~/Content/css/path2/somestyle2.css"));

Vous ne pouvez pas simplement ajouter new CssRewriteUrlTransform()à la fin comme vous pouvez le faire avec un fichier CSS car la méthode ne le prend pas en charge, vous devez donc utiliser Includeplusieurs fois :

bundles.Add(new StyleBundle("~/Content/styles/jquery-ui")
    .Include("~/Content/css/path1/somestyle1.css", new CssRewriteUrlTransform())
    .Include("~/Content/css/path2/somestyle2.css", new CssRewriteUrlTransform()));