web-dev-qa-db-fra.com

Regroupement ASP.NET MVC4 avec Twitter Bootstrap

J'essaie d'utiliser la nouvelle fonctionnalité de regroupement dans MVC 4 avec le bootstrap de Twitter et il me semble que les chemins d'accès aux fichiers png de glyphicons dans le fichier CSS sont en quelque sorte foirés. Heres mon code:

 bundles.Add(new StyleBundle("~/bundles/publiccss").Include(
            "~/Static/Css/bootstrap/bootstrap.css",
            "~/Static/Css/bootstrap/bootstrap-padding-top.css",
            "~/Static/Css/bootstrap/bootstrap-responsive.css",
            "~/Static/Css/bootstrap/docs.css"));


        bundles.Add(new ScriptBundle("~/bundles/publicjs").Include(
            "~/Static/Js/jquery-1.7.2.js",
            "~/Static/Js/bootstrap/bootstrap.js",
            "~/Static/Js/cookie/jquery.cookie.js"));

Je ne vois pas d'icônes sur les boutons et de même. Est-ce que je fais quelque chose de mal ici? Aucune suggestion?

asp.nettwitter-bootstrapasp.net-mvc-4bundling-and-minificationasp.net-optimization
37
Pelle

Le problème est probablement que les icônes/images dans les fichiers CSS utilisent des chemins d'accès relatifs. Par conséquent, si votre bundle ne réside pas dans le même chemin d'accès d'application que vos fichiers CSS dégroupés, ils deviennent des liens rompus. 

La liste des tâches renferme des URL dans notre base de données, mais pour le moment, la meilleure chose à faire est de faire en sorte que votre chemin d'accès au bundle ressemble au répertoire css pour que les URL relatives fonctionnent, c'est-à-dire: 

new StyleBundle("~/Static/Css/bootstrap/bundle")

Mise à jour: Nous avons ajouté un support pour cela dans la version 1.1beta1, donc pour réécrire automatiquement les URL de l'image, vous pouvez ajouter un nouvel élément ItemTransform qui le rebase automatiquement.

bundles.Add(new StyleBundle("~/bundles/publiccss").Include(
            "~/Static/Css/bootstrap/bootstrap.css",
            "~/Static/Css/bootstrap/bootstrap-padding-top.css",
            "~/Static/Css/bootstrap/bootstrap-responsive.css",
            "~/Static/Css/bootstrap/docs.css", new CssRewriteUrlTransform()));
38
Hao Kung

'CssRewriteUrlTransform' fonctionne parfaitement pour les applications qui ne s'exécutent PAS sur un répertoire virtuel.

Donc, si votre application fonctionne sur http://votre-site.com/ / elle fonctionne très bien, mais si elle fonctionne sur http://votre-site.com/votre-app/ vous Vous aurez 404 pour toutes vos images, car le défaut 'CssFixRewriteUrlTransform' fait référence à vos images avec un '/'.

Pour résoudre ce problème, j'ai implémenté ma propre version de 'CssRewriteUrlTransform' comme ceci: 

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

    public string Process(string includedVirtualPath, string input) {
        if (includedVirtualPath == null) {
            throw new ArgumentNullException("includedVirtualPath");
        }
        var directory = VirtualPathUtility.GetDirectory(includedVirtualPath);
        return ConvertUrlsToAbsolute(directory, input);
    }

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

MISE À JOUR: merci aux superjos qui ont souligné qu’il s’agissait d’une autre solution: 

public class CssRewriteUrlTransformWrapper : IItemTransform
{
    public string Process(string includedVirtualPath, string input)
    {           
        return new CssRewriteUrlTransform().Process("~" + VirtualPathUtility.ToAbsolute(includedVirtualPath), input);           
    }
}
24
Luís Deschamps Rudge

Ce que vous pouvez faire, c’est que vous pouvez aller à personnaliser page et changer @iconSpritePath et @iconWhiteSpritePath dans la section Sprites et, bien sûr, télécharger le nouveau style.

J'ai mis mes images dans le dossier dossier Content/Images et j'ai changé le chemin d'accès dans:

  • /Content/Images/glyphicons-halflings.png
  • /Content/Images/glyphicons-halflings-white.png

Une autre solution consiste à télécharger tous les fichiers LESS de github , à modifier les mêmes variables dans le fichier variables.less et à recompiler le fichier bootrap.less avec un outil tel que SimpLESS .

5
LeftyX

Correction de ce problème maintenant ajouté à mon paquet AspNetBundling NuGet qui résout un tas d'autres problèmes du transformateur standard, en particulier l'utilisation de data-uris. Open-sourced sur GitHub aussi.

Il suffit de faire:

  1. Install-Package AspNetBundling
  2. Remplacer CssRewriteUrlTransform par CssRewriteUrlTransformFixed
1
benmccallum