2012-09-21 8 views
41

Así que soy nuevo en ASP.NET MVC 4 (bueno, usé 3 un poco).¿Por qué mis paquetes de estilo no se procesan correctamente en ASP.NET MVC 4?

De todos modos, en mi archivo BundleConfig.cs, estoy tratando de cargar los archivos css de Twitter Bootstrap y un archivo adicional site.css.

Pero solo se muestra el archivo site.css. He confirmado que los archivos de arranque css son de hecho en el lugar correcto (carpeta de contenido) y se encuentran en la misma ubicación que el site.css

bundles.Add(new StyleBundle("~/Content/css").Include(
      "~/Content/bootstrap.min.css", 
      "~/Content/bootstrap-responsive.min.css", 
      "~/Content/site.css")); 

EDITAR

bien, este no es mi La forma preferida, pero Andrei Drynov me recomienda:

@import url("bootstrap.min.css") 
body{background: #e8e6da;padding-top:60px;padding-bottom:40px;} 
@import url("bootstrap-responsive.min.css") 

Pero eso no funciona. Cambié el site.css al anterior pero ahora el color de fondo del cuerpo ni siquiera funciona. Si elimino las @importaciones, el fondo es el color correcto.

EDIT 2

Yo no lo entiendo, pero añadiendo:

bundles.IgnoreList.Clear(); 

A mis lotes de archivos arreglado. Hmmm. No estoy seguro de comprender. Pero pude eliminar @imports del sitio.css.

Extraño.

+0

Si mira la pestaña Red en las herramientas del desarrollador, ¿se obtienen esos archivos CSS? – AFD

+0

No. Veo site.css y algunos JS que cargo. – cbmeeks

+0

¿Cómo referencia el paquete en su diseño o vista? –

Respuesta

84

El valor por defecto es para el Ignorelist hacer caso omiso de cualquier script minified.

Puede eliminar el '.min' de sus nombres, o borrar la Lista Ignorar.

+0

Esta es la respuesta correcta. Bundles usará automáticamente la versión minimizada, por lo tanto, no la incluya en el nombre del script, simplemente use 'bootstrap.css' en su lugar, y mantenga la versión no minificada en su directorio de contenido. –

2

No consumo paquetes de arranque (como una excepción), pero sus versiones minified, por lo que este funciona para mí:

<!DOCTYPE html> 
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]--> 
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]--> 
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]--> 
<!--[if gt IE 8]><!--><html class="no-js"><!--<![endif]--> 
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
    <title>@ViewBag.Title</title> 
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" /> 
    <meta name="viewport" content="width=device-width"> 
    <link rel="stylesheet" href="@Url.Content("~/Content/bootstrap.min.css")"> 
    <style> 
     body { 
      padding-top: 60px; 
      padding-bottom: 40px; 
     } 
    </style> 
    <link rel="stylesheet" href="@Url.Content("~/Content/bootstrap-responsive.min.css")"> 
    @Styles.Render("~/Content/less") 
    @Scripts.Render("~/bundles/modernizr") 
</head> 
<body> 

La parte con el estilo en línea es de http://www.initializr.com/ de la parte superior barra de navegación, si no lo necesitas, solo elimínalo.

Como alternativa, puede hacer lo mismo en su archivo styles.css:

comportamiento
@import url('bootstrap.min.css'); 

body { 
    padding-top: 60px; 
    padding-bottom: 40px; 
} 

@import url('bootstrap-responsive.min.css'); 

You CSS Code below 
+0

Bueno, eso ciertamente funciona, pero esperaba usar los paquetes. Realmente me gusta la idea de usar paquetes. Siente 'Rails like' para mí. :-) – cbmeeks

+0

En su actualización ... importarlo en el sitio.css es incluso mejor. Usaré ese método a menos que alguien me muestre cómo usarlo en el paquete. – cbmeeks

+0

La url @import no funcionó. Ver actualización Gracias – cbmeeks

15

¡Solo para dejar saber a alguien más que no puede encontrar una solución funcional fácilmente en este largo hilo, tuve exactamente el mismo problema y lo resolví de la misma manera sugerida en las ediciones que se encuentran al final de la pregunta real!

empecé una nueva aplicación Web MVC4 proyecto, rutas creadas para paquetes de arranque en el mismo código que se muestran arriba:

bundles.Add(new StyleBundle("~/Content/css").Include(
      "~/Content/bootstrap.min.css", 
      "~/Content/bootstrap-responsive.min.css", 
      "~/Content/site.css")); 

embargo, debido a razones desconocidas, no estaba cargando .. Finalmente me di por vencido y decidió buscarlo en Google y encontró esta página.

Intenté agregar lo siguiente como la primera línea en el archivo BundleConfig.cs. Se volvió a compilar y todo comenzó a funcionar y ahora los estilos se estaban cargando correctamente ahora.

bundles.IgnoreList.Clear(); 

Quizás esto ayude a alguien.

+1

Esto sería consistente con la respuesta de Paul anterior que indica que los archivos '.min' se ignoran por defecto. También sugiere eliminar la IgnoReList o cambiar el nombre de los archivos para eliminar .min. – JLRishe

+0

¡Mucho MUCHO! IgnoreList fue la razón ... ¿Por qué? –

1

Como Paul declaró correctamente, los paquetes se configuraron para ignorar automáticamente los archivos 'min'. Pero ignorar esta regla en conjunto es una mala práctica, por favor consulte esta respuesta Bundler not including .min files a una mejor solución (verifique la primera y la segunda respuesta).

Cuestiones relacionadas