如何向ASP.NET MVC4样式捆绑包添加媒体属性

Question

在ASP.NET MVC4应用程序中，使用style bundle来创建样式捆绑。

    bundles.Add(new StyleBundle("~/css/pos.css")
        .Include("~/css/mypos.css"));

并在视图中呈现为

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

以调试模式生成的输出为

  <link href="/myapp/css/mypos.css" rel="stylesheet"/>

如何添加媒体属性到输出中，以便样式适用于屏幕

  <link href="/myapp/css/mypos.css" media="screen" rel="stylesheet"/>

或用于打印

<link href="/myapp/css/mypos.css" media="print" rel="stylesheet"/>

是否有更好的方法可以做到这一点，可以在CSS文件中指定媒体或其他解决方案吗？ 使用了jquery和jquery-ui。

- Andrus

---

通常不会发布外部链接，但是您的问题可以在这里找到一个相当完整的解决方案：http://danielcorreia.net/blog/quick-start-to-mvc4-bundling/。 - Mike Beeler

这个解决了问题吗？https://dev59.com/iGct5IYBdhLWcg3wgNnR#13733832 - Tim M.

是的，它看起来像是解决方案。需要添加额外的代码。这是不压缩调试模式的最佳解决方案吗？另一个选项是将@media指令添加到CSS文件中，但我的CSS文件已经包含@media。 - Andrus

Answer 1

在您的 Razor 页面中，您需要添加以下内容：

<link href="@Styles.Url("~/css/pos.css")" rel="stylesheet" type="text/css" media="print" />

- hutchonoid

---

这个压缩功能也会在调试模式下执行。如何只在生产模式下进行压缩？来自https://dev59.com/iGct5IYBdhLWcg3wgNnR的代码和Mike Beeler回答中的链接中包含相同的代码方案吗？它使用#if DEBUG检测调试模式。 - Andrus

我以前从没注意过这个问题，我还以为只有在发布模式下才会出现。 - hutchonoid

我尝试了，它在调试模式下也进行了代码缩小。MS程序经理在我的评论中的SO答案中确认了这一点。链接中的长代码是否是防止调试时缩小的唯一解决方案？打印CSS文件很长，且包含@screen指令（也许这是个bug），因此似乎不可能将它们全部嵌入@media print {}中。 - Andrus

似乎有点可惜，我必须承认我过去使用的打印样式非常简短。我很感兴趣看看你是如何解决这个问题的。我将其添加为收藏夹。 - hutchonoid

我将Mike的答案标记为答案，因为它可能解决了这个问题。目前在调试中使用压缩样式对我来说也没问题，所以我正在使用你的答案。如果需要在浏览器调试器中检查样式，我会尝试Mike的解决方案。 - Andrus

安装Visual Studio 2013 Web Express后，该链接在调试和发布模式下都会出现404错误。如何修复？如果相同的解决方案在Visual Studio 2012 Express中运行，则可以正确检索css文件。 - Andrus

Answer 2

虽然有点晚了，但还是要说一下：这里有一个方法。

Styles.RenderFormat(string tagFormat, params string[] paths)

这是由普通的Styles.Render调用内部使用的。对于格式，您可以简单地使用

"<link href=\"{0}\" rel=\"stylesheet\" media=\"print\" />"

或者您想要添加的其他属性。

- Christoph Herold