Insert CSS to ASP.NET MVC Layout Page on Build in Visual Studio

Question

我在 Visual Studio 2013 年有一个 ASP.NET MVC 项目。

我想在构建项目时自动将缩小的 CSS 样式表（使用 Web Essentials VS 扩展缩小）的内容插入到 MVC 布局页面上的样式标签中。

编辑 - 这是为了减少首次加载时首屏的渲染阻塞效果（参见Optimize CSS Delivery）

我该怎么做？

Answer 1

您可以尝试使用 ASP.NET 4.5

的缩小功能

在 App_Start 文件夹中，添加 BundleConfig.cs class 以指定 CSS 个文件的位置：

public class BundleConfig
{
  public static void RegisterBundles(BundleCollection bundles)
  {
     //For Css
     bundles.Add(new StyleBundle("~/Content/BundlesCSS").Include(
                        "~/Content/mycss1.css",
                        "~/Content/mycss2.css"));
  }
}

然后在视图中，添加这行代码来渲染 CSS:

<%:Styles.Render("~/Content/BundlesCSS")%>

您还可以在开发时通过在 Web.config 文件中设置调试属性的值来禁用此功能：

<system.web>
    <compilation debug="true" />
</system.web>

查看更多详情：Bundling and Minification

Answer 2

如果有人还在寻找答案。

我创建了一个 HTML 助手，如下所示：

public static class CriticalCssHelper
{
    public static MvcHtmlString CriticalCss(this HtmlHelper html, params string[] paths) 
    {
        var style = new TagBuilder("style");

        foreach (var path in paths)
        {
            var filePath = HttpContext.Current.Server.MapPath(path);
            style.InnerHtml = File.ReadAllText(filePath);
        }

        return new MvcHtmlString(style.ToString());
    }
}

在您的 *.cshtml 文件中，您可以像这样使用：

@Html.CriticalCss("~/Content/css/CriticalCss/layout.min.css")

PS。这也可能有助于页面速度优化：Minify HTML output from an ASP.Net MVC Application（有点偏离主题，但是相关，因为它也缩小了内联 css）

Answer 3

    public static String EmbedCss(this HtmlHelper htmlHelper, string path, string tagId = "")
    {
        // take a path that starts with "~" and map it to the filesystem.
        var cssFilePath = HttpContext.Current.Server.MapPath(path);
        // load the contents of that file
        try
        {
            var cssText = System.IO.File.ReadAllText(cssFilePath);
            var minifier = new Minifier();
            cssText = minifier.MinifyStyleSheet(cssText);
            var styleElement = new TagBuilder("style");
            if (!String.IsNullOrEmpty(tagId))
            {
                styleElement.Attributes.Add("id", tagId);
            }

            styleElement.SetInnerText(cssText);
            return styleElement.ToString();
        }
        catch (Exception ex)
        {
            // return nothing if we can't read the file for any reason
            return null;
        }
    }

Insert CSS to ASP.NET MVC Layout Page on Build in Visual Studio

Insert CSS to ASP.NET MVC Layout Page on Build in Visual Studio

asp.net

asp.net-mvc

pageload

visual-studio