css - Paquetes MVC4: sin iconos de Twitter Bootstrap
asp.net-mvc-4 twitter-bootstrap (2)
Ejecutar mi aplicación MVC4 en modo de depuración (por lo que no hay minificación de css / scripts) funciona bien. Tan pronto como corro sin depuración (css / scripts minified), mis iconos de Twitter Bootstrap no se muestran. Otro hilo aquí sugiere utilizar bundles.IgnoreList.Clear () . Pero eso no parece funcionar para mí. Mi BundleConfig.RegisterBundles (...) se ve así:
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"));
}
}
Todos los paquetes fueron instalados usando Nuget (como digo, funciona bien en modo de depuración). Mi carpeta de contenido también contiene las versiones miniaturizadas de ambos archivos bootstrap ... css, pero no una versión reducida de my.css. Los iconos de glifo están en la subcarpeta de imágenes.
Mi _Layout.cshtml se ve así:
<head>
...
@Styles.Render("~/bundles/maincss")
</head>
Debo agregar, que por el modo "sin depuración", me refiero a establecer la opción de depuración = "falsa" en el archivo Web.config:
<compilation debug="false" targetFramework="4.5" />
¿Alguien tiene alguna idea de por qué los iconos de arranque de Twitter no se muestran en el modo "sin depuración" ?
Gracias Rob
Estoy en el móvil así que pido disculpas por la breve respuesta, pero lo actualizaré más tarde.
Para resumir, tenía que ver con la ruta relativa que se ensuciaba después de empacar. Pero la buena noticia es que la última biblioteca de paquetes lo resuelve.
Actualizar
Para completar los espacios en blanco, esencialmente lo que está sucediendo es que los archivos CSS tienen rutas relativas a los recursos (en este caso un icono sprite). Cuando está en modo de depuración, los archivos se envían por separado a la página, por lo que las referencias se conservan ( /Content/bootstrap.css con una referencia a images/glyphicons-halflings.png (haciendo la ruta completa /Content/images/glyphicons-halflings.png ). Sin embargo, cuando se elimina la depuración, los archivos se incluyen y la ruta ahora se relaciona con la ruta virtual que le proporcionó a su paquete. En el caso anterior, ahora se origina en /bundles/maincss que lo convierte en un error /bundles/maincss/images/glyphicons-halflings.png camino.
La buena noticia es que se trata de un error resuelto y, a partir de Microsoft.AspNet.Web.Optimization v1.1.0, ahora tiene CssRewriteUrlTransform que reemplazará todas las rutas relativas (dentro de los archivos CSS) con su homólogo absoluto. Esto significa que no importa lo que llame el paquete, los recursos aún se resolverán.
Entonces, para solucionar el problema, puede hacer lo siguiente:
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)
);
Mi único reparo es qué tan feo se ve cuando quieres múltiples archivos, así que para resolverlo puedes simplificarlo con un método de extensión:
/// <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;
}
Lo que hace que el código anterior sea un poco más limpio. (Podría decirse que escogí un nombre de método largo, pero me gusta mantener claros los nombres de los métodos con respecto al propósito)
bundles.Add(
new StyleBundle("~/bundles/maincss").IncludeWithCssRewriteTransform(
"~/Content/bootstrap.css",
"~/Content/bootstrap-responsive.css",
"~/Content/my.css"
)
);
Me encontré con lo mismo usando Bootstrap 3.0. La respuesta de @ brad-christie resolvió mi problema hasta que utilicé NuGet para actualizar a Microsoft ASP.Net Web Optimization Framework 1.1.1. Esto pareció detener el CssRewriteUrlTransform corrección CssRewriteUrlTransform . CssRewriteUrlTransform el problema eliminando las referencias a CssRewriteUrlTransform y creando una hoja de estilos, bootstrap-bundle-font-fix.css , que contiene solo lo siguiente:
@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'');
}
Y luego incluirlo en mi paquete 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"));