Styles.Render en MVC4


Respuestas:


453

Llama a los archivos incluidos en ese paquete particular que se declara dentro de la BundleConfigclase en la App_Startcarpeta.

En ese caso particular, la llamada a @Styles.Render("~/Content/css")está llamando "~ / Content / site.css".

bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));

22
Una cosa que debe saber es que no agregará un archivo .css que ya esté minimizado al paquete. Ejemplo: no funciona con bootstrap.min.js, solo con bootstrap.js. Espero que esto pueda ayudar a otros.
codea

55
Se trata de estilos, no de guiones. Si desea usar bootstrap.min.js, simplemente cree un paquete como este: bundles.Add (new ScriptBundle ("~ / bundles / bootstrap"). Include ("~ / Scripts / bootstrap.min.js"));
Xcalibur37

1
@codea No estoy seguro de cuál es su configuración, pero por defecto el paquete se hará *.min.*cargo de los *.*archivos.
skmasq

@skmasq, al momento de escribir estas líneas, estaba usando VS2013. Las cosas pueden haber cambiado hasta ahora. Gracias por mencionar eso :)
codea

No lo entiendo ... ¿por qué tomarse la molestia de crear paquetes y agregar esas rutas a estas clases locas en MVC cuando simplemente puede agregar un CSS <link> al archivo en su página web? Si agrega todos sus enlaces CSS a sus hojas de estilo en un archivo de diseño o una vista parcial, también puede administrarlos en un lugar simple. Este también es un mal diseño para rutas de estilo de código duro como ese, ya que ya no se pueden crear máscaras CSS, que era el propósito del sistema CSS cuando se diseñó hace 20 años.
Stokely

34

Cuidado con la mayúsculas y minúsculas. Si tienes un archivo

/Content/bootstrap.css

y redirige en su Bundle.config a

.Include ("~ / Content / Bootstrap.css")

no cargará el css.


Además: la segunda inclusión se escribe de manera diferente.
Dan Esparza

1
¿hay soporte para sass / less-files, también?
Manticore

12

Un poco tarde para la fiesta. Pero parece que nadie ha mencionado la
agrupación y minificación de StyleBundle, así que ...

@Styles.Render("~/Content/css") 

llamadas en Application_Start():

BundleConfig.RegisterBundles(BundleTable.Bundles);            

que a su vez llama

public static void RegisterBundles(BundleCollection bundles)
{
    bundles.Add(new StyleBundle("~/Content/css").Include(
              "~/Content/bootstrap.css",
              "~/Content/Site.css"));
}

RegisterBundles()efectivamente combina y minimiza bootstrap.css y Site.css
en un solo archivo,

<link href="/Content/css?v=omEnf6XKhDfHpwdllcEwzSIFQajQQLOQweh_aX9VVWY1" rel="stylesheet">

Pero ..

<system.web>
  <compilation debug="false" targetFramework="4.6.1" />
</system.web>

sólo cuando debug se establece en falseen Web.config.
De lo contrario bootstrap.cssy Site.cssse servirá de forma individual.
No incluido, ni minimizado:

<link href="/Content/bootstrap.css" rel="stylesheet">
<link href="/Content/Site.css" rel="stylesheet">

0

src="@url.content("~/Folderpath/*.css")" debería renderizar estilos


0

Como se define en App_start.BundleConfig, solo está llamando

bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));

No pasa nada incluso si elimina esa sección.


0

Polo No usaría Bundles en MVC por múltiples razones. No funciona en su caso porque tiene que configurar una clase BundleConfig personalizada en su carpeta Apps_Start. Esto no tiene sentido cuando simplemente puede agregar un estilo en la cabeza de su html de esta manera:

<link rel="stylesheet" href="~/Content/bootstrap.css" />
<link rel="stylesheet" href="~/Content/bootstrap.theme.css" />

También puede agregarlos a un Layout.cshtml o clase parcial que se llama desde todas sus vistas y se deja caer en cada página. Si sus estilos cambian, puede cambiar fácilmente el nombre y la ruta sin tener que volver a compilar.

Agregar enlaces codificados a CSS en una clase se rompe con el propósito de separar la interfaz de usuario y el diseño del modelo de la aplicación. Tampoco desea que las rutas de hoja de estilo codificadas se administren en c # porque ya no puede crear "máscaras" o modelos de estilo separados para diferentes dispositivos, temas, etc.

<link rel="stylesheet" href="~/UI/Skins/skin1/base.css" />
<link rel="stylesheet" href="~/UI/Skins/skin2/base.css" />

Con este sistema y Razor, ahora puede cambiar la ruta de acceso de la piel desde una base de datos o configuración de usuario y cambiar todo el diseño de su sitio web simplemente cambiando la ruta de forma dinámica.

Todo el propósito de CSS hace 15 años era desarrollar "máscaras" de hoja de estilo controladas por el usuario y controladas por la aplicación para los sitios, de modo que pudiera cambiar el aspecto y la sensación de la interfaz de usuario por separado de la aplicación y reutilizar el contenido independientemente de la estructura de datos. .... por ejemplo, una versión imprimible, móvil, audio, raw xml, etc.

Al regresar ahora a este sistema de ruta "antiguo" y codificado utilizando clases de C #, estilos rígidos como Bootstrap y fusionando los temas de los sitios con el código de la aplicación, hemos retrocedido nuevamente a cómo se crearon los sitios web en 1998.


1
Entonces, ¿qué diablos minificationentonces? : s / :(
Scott Fraley

Si. ¿Por qué los desarrolladores en 2019 minimizan css y javascript pero luego crean API como Angular y otros que envían megabytes de ECMAScript (Javascript) innecesarios a los clientes? Solíamos enviar menos código o código comprimido a clientes con ancho de banda limitado para que pudieran obtener el código cuando estaban restringidos por el ancho de banda ... es decir, módems de 14k baudios. Tenemos 5G por lo que no se necesita compresión de código como compresión GIF o minificación. Sin embargo, hemos retrocedido enviando enormes cantidades de scripts a los clientes como resultado. Entonces, ¿por qué minimizar algo?
Stokely

1
¿Porque deberíamos enviar tan poco como sea posible por cable? Ciertamente trato de mantener las cosas al mínimo.
Scott Fraley

0

Hice todo lo necesario para agregar paquetes a una web MVC 3 (soy nuevo en la solución existente). Styles.RenderNo funcionó para mí. Finalmente descubrí que simplemente me faltaba un colon. En una página maestra: <%: Styles.Render("~/Content/Css") %> todavía estoy confundido acerca de por qué (en la misma página) <% Html.RenderPartial("LogOnUserControl"); %>funciona sin los dos puntos.

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.