MVC4 中的 Styles.Render

Posted 2023-02-15

【中文标题】MVC4 中的 Styles.Render

【英文标题】：Styles.Render in MVC4

【发布时间】：2012-08-15 05:40:53

【问题描述】：

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

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

我的Content 文件夹中没有名为“css”的文件或文件夹。

【问题讨论】：

看我的asp.net/mvc/tutorials/mvc-4/bundling-and-minification教程

【参考方案1】：

它调用包含在特定包中的文件，该包在App_Start 文件夹中的BundleConfig 类中声明。

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

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

【讨论】：

要知道的是，它不会将已经最小化的 .css 文件添加到包中。示例：它不适用于 bootstrap.min.js，仅适用于 bootstrap.js。我希望这可以帮助其他人。

这是在讨论样式，而不是脚本。如果你想使用 bootstrap.min.js，只需像这样创建一个包： bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include("~/Scripts/bootstrap.min.js"));

@codea 我不确定您的设置是什么，但默认情况下，bundler 将采用 *.min.* 而非 *.* 文件。

@skmasq，在写这些行时，我使用的是 VS2013。直到现在，情况可能已经发生了变化。感谢您提及:)

我不明白....当您只需将 CSS 添加到您网页？如果您将所有 CSS 链接添加到样式表中，例如布局文件或局部视图，您也可以在一个简单的地方管理它们。这也是硬编码样式路径的糟糕设计，因为您不能再创建 CSS 皮肤，而这正是 20 年前设计时 CSS 系统的全部目的。

【参考方案2】：

注意区分大小写。如果你有文件

/Content/bootstrap.css

然后你在你的 Bundle.config 中重定向到

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

它不会加载css。

【讨论】：

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

是否也支持 sass/less-files？

【参考方案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>

仅当 debug 在Web.config 中设置为false。 否则 bootstrap.css 和 Site.css 将单独提供。 未捆绑，也未缩小：

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

【参考方案4】：

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

【参考方案5】：

正如 App_start.BundleConfig 中定义的那样，它只是调用

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

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

【参考方案6】：

Polo 由于多种原因，我不会在 MVC 中使用 Bundle。它不适用于您的情况，因为您必须在 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，您现在可以从数据库或用户设置中切换皮肤路径，并通过动态更改路径来更改您网站的整体设计。

15 年前 CSS 的全部目的是为网站开发用户控制和应用程序控制的样式表“皮肤”，这样您就可以将 UI 外观与应用程序分开，并将内容重新调整为独立于数据结构.....例如可打印版本、移动版本、音频版本、原始 xml 等。

现在回到这个“老式”的硬编码路径系统，使用 C# 类、Bootstrap 等僵化风格，以及将网站主题与应用程序代码合并，我们再次回到了网站的构建方式1998 年。

【讨论】：

那么，与minification 见鬼去吧？ :s / :(

是的。为什么开发人员在 2019 年尽量减少 css 和 javascript，然后构建像 Angular 和其他向客户端发送兆字节不必要的 ECMAScript (Javascript) 的 API？我们过去常常向带宽有限的客户发送较少的代码或压缩代码，以便他们在带宽受限时获得代码......即 14k 波特调制解调器。我们有 5G 即将到来，因此不需要像 gif 压缩或缩小这样的代码压缩。然而，我们却因此而倒退了向客户发送大量脚本。那么为什么要最小化任何东西呢？

因为我们应该尽可能少地通过网络发送？我当然会尽量减少。

【参考方案7】：

我做了所有必要的事情来将捆绑添加到 MVC 3 网络（我是现有解决方案的新手）。 Styles.Render 对我不起作用。我终于发现我只是少了一个冒号。在母版页中：<%: Styles.Render("~/Content/Css") %> 我仍然对为什么（在同一页面上）<% Html.RenderPartial("LogOnUserControl"); %> 工作冒号感到困惑。

【参考方案8】：

在您的 web.config 上将此设置为 False

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