c# - scripts - Styles.Render en MVC4

style bundle in mvc

Question

En un proyecto .NET MVC4 , ¿cómo funciona @Styles.Render ?

Quiero decir, en @Styles.Render("~/Content/css") qué archivo está llamando?

No tengo un archivo o una carpeta llamada "css" dentro de mi carpeta de Content .

Answer 1

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

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

Nada sucede incluso si eliminas esa sección.

Answer 2

Cuidado con la sensibilidad de los casos. Si tienes un archivo

/Content/bootstrap.css

y redireccionas en tu Bundle.config a

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

no cargará el css.

Answer 3

Está llamando a los archivos incluidos en ese paquete particular que se declara dentro de la clase BundleConfig en la carpeta App_Start .

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"));

Answer 4

Hice todo lo necesario para agregar paquetes a una web de MVC 3 (soy nuevo en la solución existente). Styles.Render no 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"); %> <% Html.RenderPartial("LogOnUserControl"); %> funciona sin el colon.

Answer 5

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

<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 llame desde todas sus vistas y se coloque en cada página. Si sus estilos cambian, puede cambiar fácilmente el nombre y la ruta sin tener que volver a compilarlos.

La adición de enlaces codificados a CSS en una clase rompe con todo el propósito de la separación de la interfaz de usuario y el diseño del modelo de aplicación, también. Tampoco desea que las rutas de la hoja de estilo codificadas de manera rígida se administren en c # porque ya no puede crear "máscaras" o modelos de estilo separados para, por ejemplo, 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 máscara desde una base de datos o configuración de usuario y cambiar el diseño completo de su sitio web simplemente cambiando la ruta de forma dinámica.

El propósito de CSS hace 15 años era desarrollar "pieles" de hojas de estilo controladas por el usuario y por la aplicación para que los sitios pudieran cambiar la apariencia de la interfaz de usuario y sentirse separados de la aplicación y reutilizar el contenido independientemente de la estructura de datos. .... por ejemplo, una versión imprimible, móvil, versión de audio, XML sin procesar, etc.

Al retroceder ahora a este sistema de rutas de acceso rígido y "anticuado" que usa clases de C #, estilos rígidos como Bootstrap, y fusionar los temas de los sitios con el código de la aplicación, hemos retrocedido nuevamente a cómo se construyeron los sitios web en 1998.

Answer 6

Un poco tarde para la fiesta. Pero parece que nadie ha mencionado
bundling y StyleBundle 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() combina y minimiza efectivamente bootstrap.css & 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>

solo cuando la debug se establece en false en Web.config .
De lo contrario, bootstrap.css & Site.css servirán individualmente.
No empaquetado, ni minificado:

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

Answer 7

src="@url.content("~/Folderpath/*.css")" debe mostrar los estilos