css - into - twitter widgets csp




Bundle MVC4-Nessuna icona di Bootstrap di Twitter (2)

Mi sono imbattuto nella stessa cosa usando Bootstrap 3.0. @ La risposta di brad-christie ha risolto il mio problema fino a quando non ho utilizzato NuGet per l'aggiornamento a Microsoft ASP.Net Web Optimization Framework 1.1.1. Questo sembrava fermare la correzione CssRewriteUrlTransform dal lavoro. Ho risolto il problema rimuovendo i riferimenti a CssRewriteUrlTransform e creando un foglio di stile, bootstrap-bundle-font-fix.css , contenente solo quanto segue:

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('../../Content/fonts/glyphicons-halflings-regular.eot');
  src: url('../../Content/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), 
       url('../../Content/fonts/glyphicons-halflings-regular.woff') format('woff'),
       url('../../Content/fonts/glyphicons-halflings-regular.ttf') format('truetype'), 
       url('../../Content/fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}

E poi includendolo nel mio bundle di bootstrap css:

bundles.Add(new StyleBundle("~/bundles/Content/bootstrap")
    .Include("~/Content/bootstrap/bootstrap.css")
    .Include("~/Content/bootstrap/bootstrap-theme.css")
    .Include("~/Content/bootstrap-bundle-font-fix.css")
    .Include("~/Content/sticky-footer-navbar.css"));

L'esecuzione della mia app MVC4 in modalità di debug (quindi nessuna modifica di css / script) funziona correttamente. Non appena eseguo il debug (css / scripts minified), le icone di Bootstrap di Twitter non vengono visualizzate. Un altro thread qui suggerito utilizza bundles.IgnoreList.Clear () . Ma non sembra funzionare per me. My BundleConfig.RegisterBundles (...) si presenta così:

public static void RegisterBundles(BundleCollection bundles)
{
    bundles.IgnoreList.Clear();

    // Some JavaScript bundles only
    // ...

    bundles.Add(new StyleBundle("~/bundles/maincss").Include(
        "~/Content/bootstrap.css",
        "~/Content/bootstrap-responsive.css",
       "~/Content/my.css"));
    }
}

Tutti i pacchetti sono stati installati usando Nuget (come ho detto, funziona correttamente in modalità debug). La cartella Contenuto personale contiene anche le versioni minificate dei file bootstrap ... css, ma non una versione minificata di my.css. Le icone degli glifi si trovano nella sottocartella delle immagini.

Il mio _Layout.cshtml si presenta così:

<head>
    ...
    @Styles.Render("~/bundles/maincss")
</head>

Dovrei aggiungere, che con la modalità "non-debug", intendo l'impostazione dell'opzione debug = "false" nel file Web.config:

<compilation debug="false" targetFramework="4.5" />

Qualcuno ha idea del perché le icone di bootstrap di twitter non vengano visualizzate in modalità "non-debug" ?

Grazie Rob


Sono su cellulare, quindi mi scuso per una breve risposta, ma aggiornerò più tardi.

Leggi questo

Per farla breve, aveva a che fare con il percorso relativo dopo essere stato bloccato dopo il raggruppamento. Ma la buona notizia è che l'ultima libreria di bundle lo risolve.

Aggiornare

Per riempire gli spazi vuoti, in sostanza ciò che sta accadendo è che i file CSS hanno percorsi relativi alle risorse (in questo caso un'icona sprite). Quando si trova in modalità debug, i file vengono inviati separatamente alla pagina in modo che i riferimenti vengano mantenuti ( /Content/bootstrap.css con un riferimento a images/glyphicons-halflings.png (rendendo il percorso completo /Content/images/glyphicons-halflings.png Tuttavia, quando il debug viene rimosso i file sono raggruppati e il percorso è ora relativo a qualsiasi percorso virtuale che hai fornito al tuo /bundles/maincss il caso di sopra, ora hai origine da /bundles/maincss che rende errati /bundles/maincss/images/glyphicons-halflings.png .

La buona notizia è che si trattava di un bug risolto e di Microsoft.AspNet.Web.Optimization v1.1.0 ora avete CssRewriteUrlTransform che sostituirà tutti i percorsi relativi (all'interno dei file CSS) con la loro controparte con percorso assoluto. Ciò significa che, indipendentemente da ciò che chiami il pacchetto, le risorse verranno comunque risolte.

Quindi, per risolvere il problema, puoi semplicemente fare quanto segue:

IItemTransform cssFixer = new CssRewriteUrlTransform();

bundles.Add(
    new StyleBundle("~/bundles/maincss")
        .Include("~/Content/bootstrap.css", cssFixer)
        .Include("~/Content/bootstrap-responsive.css", cssFixer)
        .Include("~/Content/my.css", cssFixer)
);

La mia unica preoccupazione è la brutta impressione di questo quando vuoi più file, quindi per risolverlo puoi semplificarlo con un metodo di estensione:

/// <summary>
/// Includes the specified <paramref name="virtualPaths"/> within the bundle and attached the
/// <see cref="System.Web.Optimization.CssRewriteUrlTransform"/> item transformer to each item
/// automatically.
/// </summary>
/// <param name="bundle">The bundle.</param>
/// <param name="virtualPaths">The virtual paths.</param>
/// <returns>Bundle.</returns>
/// <exception cref="System.ArgumentException">Only available to StyleBundle;bundle</exception>
/// <exception cref="System.ArgumentNullException">virtualPaths;Cannot be null or empty</exception>
public static Bundle IncludeWithCssRewriteTransform(this Bundle bundle, params String[] virtualPaths)
{
    if (!(bundle is StyleBundle))
    {
        throw new ArgumentException("Only available to StyleBundle", "bundle");
    }
    if (virtualPaths == null || virtualPaths.Length == 0)
    {
        throw new ArgumentNullException("virtualPaths", "Cannot be null or empty");
    }
    IItemTransform itemTransform = new CssRewriteUrlTransform();
    foreach (String virtualPath in virtualPaths)
    {
        if (!String.IsNullOrWhiteSpace(virtualPath))
        {
            bundle.Include(virtualPath, itemTransform);
        }
    }
    return bundle;
}

Il che rende il codice sopra un po 'più pulito. (Probabilmente ho scelto un nome di metodo lungo, ma mi piace mantenere chiari i nomi dei metodi per quanto riguarda lo scopo)

bundles.Add(
    new StyleBundle("~/bundles/maincss").IncludeWithCssRewriteTransform(
        "~/Content/bootstrap.css",
        "~/Content/bootstrap-responsive.css",
        "~/Content/my.css"
    )
);




bundling-and-minification