Create & use CSS bundle in ASP.NET MVC

How to create and use a CSS style bundle in ASP.NET MVC?

StyleBundle resembles ScriptBundle. The way we add virtual path and file names / patterns into the ScriptBunlde, similary we do it in the StyleBundle.

Refer to previous points of creating and using ScriptBundle for more details information.

CODES FROM ~/APP_START/BUNDLECONFIG.CS

var pagedListFile = new StyleBundle("~/Content/PagedListCSS");
pagedListFile.Include("~/Content/PagedList.css");
bundles.Add(pagedListFile);

OR

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

To use it, we can use @Style helper method like

CODE FROM VIEW OR LAYOUT

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

Above code will render like below in the browser source

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

As “~/Content/css” virtual path is including two files while adding into the ~/App_Start/BundleConfig.cs page.