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

Question

I have a ASP.NET MVC project in Visual Studio 2013.

I would like to automatically insert the content of a minified CSS stylesheet (minified using Web Essentials VS extension) into a style tag on an MVC layout page when building the project.

EDIT - This is for reducing render blocking effects above the fold for first time load (see Optimize CSS Delivery)

How can I do this?

Answer 1

In case anyone is still looking for an answer.

I created a HTML helper like below:

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());
    }
}

And in your *.cshtml file you can just use like this:

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

PS. This might also help for pagespeed optimisation: Minify HTML output from an ASP.Net MVC Application (a little off topic, however are related as it minifies inline css as well)