Styles.Render no MVC4

Respostas:

453

Ele está chamando os arquivos incluídos nesse pacote específico que é declarado dentro da BundleConfigclasse na App_Startpasta.

Nesse caso específico, a chamada para @Styles.Render("~/Content/css")está chamando "~ / Content / site.css".

bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));
NunoCarmo
fonte
22
Uma coisa a saber é que ele não adicionará um arquivo .css que já esteja minimizado no pacote. Exemplo: não funciona com bootstrap.min.js, apenas com bootstrap.js. Espero que isso possa ajudar os outros.
codea 29/05
5
Isso está falando de estilos, não de scripts. Se você deseja usar o bootstrap.min.js, crie um pacote como este: bundles.Add (new ScriptBundle ("~ / bundles / bootstrap"). Include ("~ / Scripts / bootstrap.min.js"));
precisa
11
@codea eu não tenho certeza qual é o seu set-up, mas por padrão bundler terá *.min.*mais *.*arquivos.
Skmasq
@skmasq, no momento em que escrevi essas linhas, eu estava usando o VS2013. As coisas podem ter mudado até agora. Obrigado por mencionar isso :)
codea
Eu não entendi .... por que fazer todo o trabalho para criar bundles e adicionar esses caminhos a essas classes malucas no MVC quando você pode simplesmente adicionar um <link> CSS ao arquivo em sua página da web? Se você adicionar todos os seus links CSS às suas folhas de estilo em um arquivo de layout ou uma vista parcial, poderá gerenciá-los em um local simples também. Isso também é um design ruim para codificar caminhos de estilo como esse, pois você não pode mais criar skins CSS, que eram todo o objetivo do sistema CSS quando ele foi criado há 20 anos.
Stokely
34

Cuidado com a distinção entre maiúsculas e minúsculas. Se você tem um arquivo

/Content/bootstrap.css

e você redireciona no seu Bundle.config para

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

não carregará o css.

linktoemi
fonte
Além disso: a segunda inclusão é escrita de forma diferente.
Dan Esparza
11
também há suporte para arquivos sass / less?
Manticore
12

Um pouco atrasado para a festa. Mas parece que ninguém mencionou
empacotamento e minificação de StyleBundle, então ..

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

chama em Application_Start():

BundleConfig.RegisterBundles(BundleTable.Bundles);            

que por sua vez chama

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

RegisterBundles()combina eficazmente e minifies bootstrap.css e Site.css
em um único arquivo,

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

Mas ..

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

somente quando debug estiver definido como falseno Web.config.
Caso contrário, bootstrap.csse Site.cssserá servido individualmente.
Não empacotado, nem minificado:

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

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

RAM
fonte
0

Conforme definido em App_start.BundleConfig, está apenas chamando

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

Nada acontece mesmo se você remover essa seção.

Sathish Dadi
fonte
0

Polo: Eu não usaria Bundles no MVC por várias razões. Não funciona no seu caso, porque você precisa configurar uma classe BundleConfig personalizada na sua pasta Apps_Start. Isso não faz sentido quando você pode simplesmente adicionar um estilo na cabeça do seu html da seguinte forma:

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

Você também pode adicioná-los a um Layout.cshtml ou classe parcial que é chamada a partir de todas as suas visualizações e solta em cada página. Se seus estilos mudarem, você poderá alterar facilmente o nome e o caminho sem precisar recompilar.

A adição de links codificados ao CSS em uma classe quebra com o objetivo de separar a interface do usuário e o design do modelo de aplicativo. Você também não deseja que os caminhos das folhas de estilo codificadas sejam gerenciados em c # porque não é mais possível criar "skins" ou separar modelos de estilo, por exemplo, diferentes dispositivos, temas etc., como:

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

Usando este sistema e o Razor, agora você pode mudar o Skin Path de um banco de dados ou configuração do usuário e alterar todo o design do seu site, apenas alterando o caminho dinamicamente.

Todo o objetivo do CSS há 15 anos era desenvolver "skins" de folhas de estilos controladas pelo usuário e controladas por aplicativos para sites, para que você pudesse mudar a aparência da interface do usuário e se sentir separada da aplicação e redirecionar o conteúdo independentemente da estrutura de dados. .... por exemplo, uma versão imprimível, móvel, versão de áudio, xml bruto, etc.

Voltando agora a esse sistema de caminho codificado e "antiquado" usando classes C #, estilos rígidos como o Bootstrap e mesclando os temas dos sites com o código do aplicativo, voltamos ao modo como os sites foram criados em 1998.

Stokely
fonte
11
Então, que tal minificationentão? : s / :(
Scott Fraley
Sim. Por que os desenvolvedores em 2019 estão minimizando css e javascript, mas criando APIs como a Angular e outras que enviam megabytes de ECMAScript (Javascript) desnecessário para os clientes? Costumávamos enviar menos código ou código compactado para clientes com largura de banda limitada, para que eles pudessem obter o código quando estivessem limitados pela largura de banda ... ou seja, modems de transmissão de 14k baud. Temos o 5G chegando, portanto, a compactação de código, como compactação gif ou minificação, não é necessária. No entanto, voltamos a enviar enormes quantidades de scripts aos clientes como resultado. Então, por que minimizar alguma coisa?
Stokely
11
Porque deveríamos enviar o mínimo possível por cabo? Eu certamente tento manter as coisas no mínimo.
Scott Fraley
0

Fiz todas as coisas necessárias para adicionar o pacote a uma web do MVC 3 (sou novo na solução existente). Styles.Rendernão funcionou para mim. Finalmente descobri que estava simplesmente faltando dois pontos. Em uma página mestra: <%: Styles.Render("~/Content/Css") %> ainda estou confuso sobre o porquê (na mesma página) <% Html.RenderPartial("LogOnUserControl"); %>funciona sem dois pontos.

dudeNumber4
fonte