MVC4中的Styles.Render

Question

在一个 .NET MVC4 项目中，@Styles.Render 是如何工作的？

我的意思是，在 @Styles.Render("~/Content/css") 中它调用了哪个文件？

我在我的 Content 文件夹中没有叫做“css”的文件或文件夹。

- Ricardo Polo Jaramillo

---

请查看我的http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification教程。 - RickAndMSFT

Answer 1

它正在调用在App_Start文件夹中声明的特定捆绑包中包含的文件。

在这种特定情况下，对@Styles.Render("~/Content/css")的调用将调用"~/Content/site.css"。

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

- NunoCarmo

---

需要注意的是，它不会将已经被压缩的.css文件添加到打包中。例如：它不能与bootstrap.min.js一起使用，只能与bootstrap.js一起使用。希望这可以帮助其他人。 - codea

这是在谈论样式，而不是脚本。如果您想使用bootstrap.min.js，只需创建一个类似于这样的bundle：bundles.Add(new ScriptBundle("/bundles/bootstrap").Include( "/Scripts/bootstrap.min.js")); - Xcalibur37

@codea 我不确定你的设置是什么，但默认情况下bundler会优先选择*.min.*文件而不是*.*文件。 - skmasq

@skmasq，在撰写这些文字时，我正在使用VS2013。现在可能已经有所改变。感谢您提到这一点 :) - codea

我不理解...为什么在MVC中要费尽心思创建bundle并将这些路径添加到这些复杂的类中，而你只需要在网页中添加CSS<link>文件就可以了呢？如果您将所有CSS链接添加到布局文件或部分视图中的样式表中，则可以在一个简单的位置进行管理。这也是不好的设计方式，硬编码样式路径如此操作后你就不能再创建CSS主题，而这正是20年前设计CSS系统的初衷。 - Stokely

我知道这是一个非常老的评论，但是无所谓：对于浏览器处理的每个<link>标签，它都会打开到服务器的新连接。这是除了每个图像、脚本等请求之外的额外开销。这些事情在方程式的两端都有限制，因此据我所知，捆绑不仅为Prod部署添加了缩小过程，而且还减少了连接设置和拆除。所有这些都应该提高性能。 - Newclique

Answer 2

注意大小写敏感性。如果你有一个文件

/Content/bootstrap.css

并且你在Bundle.config中重定向到

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

它将无法加载css。

- linktoemi

---

另外：第二个包含的拼写不同。 - Dan Esparza

还支持Sass/Less文件吗？ - Manticore

Answer 3

有点晚了。但是似乎没有人提到StyleBundle的bundling和minification，所以..

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

Application_Start()中的调用：

BundleConfig.RegisterBundles(BundleTable.Bundles);            

这反过来调用

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

---

RegisterBundles() 可以将 bootstrap.css 和 Site.css 整合并压缩成一个文件。

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

但是...

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

只有当Web.config中的debug设置为false时，才会这样做。
否则，将单独提供bootstrap.css和Site.css。
不进行捆绑或缩小：

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

- SAm

Answer 4

Polo，我不会在MVC中使用Bundles，原因有很多。它在你的情况下无法工作，因为你必须在Apps_Start文件夹中设置一个自定义的BundleConfig类。当你可以简单地在html头部添加样式时，这是没有意义的：

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

您还可以将这些添加到Layout.cshtml或部分类中，从而从所有视图调用并放入每个页面。如果您的样式更改，则无需重新编译即可轻松更改名称和路径。

在类中添加硬编码链接到CSS会破坏UI和设计与应用程序模型分离的整体目的。您也不希望在C#中管理硬代码样式表路径，因为您不能再构建“外观”或针对不同设备、主题等的分离样式模型，例如：

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

使用此系统和Razor，您现在可以从数据库或用户设置中切换皮肤路径，并通过动态更改路径来更改整个网站的设计。

CSS 15年前的整个目的是为了开发用户控制和应用程序控制的样式表“皮肤”，以便您可以在不影响应用程序的情况下切换UI外观和感觉，并独立于数据结构重新定位内容，例如可打印版本、移动版、音频版本、原始XML等。

现在通过使用C#类、像Bootstrap这样的固定样式以及将站点主题与应用程序代码合并，我们又回到了1998年建立网站的方式。

- Stokely

---

那么，对于 minification 我们就无视它吗？:s / :( - Scott Fraley

是的。为什么2019年的开发人员要最小化CSS和JavaScript，但又构建像Angular等API，向客户端发送不必要的ECMAScript（JavaScript）兆字节？我们过去会向带宽有限的客户发送更少的代码或压缩代码，以便在他们受到带宽限制时获取代码...即14k波特调制解调器。我们有5G的到来，因此像gif压缩或缩小代码一样的代码压缩不再需要。然而，由于这个原因，我们已经倒退了，向客户端发送了大量的脚本。那么为什么还要最小化任何东西呢？ - Stokely

因为我们应该尽可能地减少网络传输的数据量，对吧？我肯定会尽量保持数据量最小化。 - Scott Fraley

如果没有其他的选择，为了环保起见，尽量减少数据传输量，因为较少的数据传输意味着较少的电力消耗、较少的设备使用、较少的存储空间占用，几乎涵盖了所有方面，更加注重绿色意识。 - bkqc

Answer 5

如在App_start.BundleConfig中定义，它只是调用

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

即使您删除了该部分，也不会发生任何事情。

- Sathish Dadi

Answer 6

我已经完成了所有必要的工作，为MVC 3 Web添加捆绑（我是新的现有解决方案）。Styles.Render对我无效。最后我发现我只是缺少了一个冒号。在主页面中：<%: Styles.Render("~/Content/Css") %> 我仍然困惑于为什么（在同一页上）<% Html.RenderPartial("LogOnUserControl"); %>可以不用冒号。

- dudeNumber4

Answer 7

src="@url.content("~/Folderpath/*.css")" 应该呈现样式

- Ram

Answer 8

将此设置为 false，在您的 web.config 文件中。

<compilation debug="false" targetFramework="4.6.1" />

- delphiman