Visual Studio 2012 Conditional Bundling

asp.net, bundling-and-minification, c#, css, visual-studio-2012

Solution

My suggestion:

Goto `Global.asax`. Ensure the method `Application_Start` contains following line:

protected void Application_Start()
{
    ...
    BundleConfig.RegisterBundles(BundleTable.Bundles);
}

Find or create class `BundleConfig` as follows, preferrably in folder `App_Start`:

public class BundleConfig
{
    public static void RegisterBundles(BundleCollection bundles)
    {
        ...

        bundles.Add(new StyleBundle("~page1").Include(
             "~/Styles/site.css",
             "~/Styles/page1.css"));

        bundles.Add(new StyleBundle("~page2").Include(
             "~/Styles/site.css",
             "~/Styles/page2.css"));

        ...

        bundles.Add(new StyleBundle("~pageN").Include(
             "~/Styles/site.css",
             "~/Styles/pageN.css"));

    }
}

Now use corresponding bundle in every appropriate page:

<link rel="stylesheet" type="text/css" href="Styles/page1" />

Or better from code:

@Styles.Render("~/Styles/page1")

(this is `cshtml`, but `aspx` syntax is for sure very similar).

Note that you must have a separate bundle per page. You should not modify one and the same bundle on the fly. Bundles have virtual Urls. In your example it is just `css`. These are cached by browsers, so regardless weather you have changed the content of bundle on the fly a browser might think this is the same and do not re-fetch it.

If you do not want to take care about adding each and every page manually to the method above. You could automate it. Following code could give you an idea how:

public class MyStyleHelper
{
    public static string RenderPageSpecificStyle(string pagePath)
    {
        var pageName = GetPageName(pagePath);
        string bundleName = EnsureBundle(pageName);
        return bundleName;
    }

    public static string GetPageName(string pagePath)
    {
        string pageFileName = pagePath.Substring(pagePath.LastIndexOf('/'));
        string pageNameWithoutExtension = Path.GetFileNameWithoutExtension(pageFileName);
        return pageNameWithoutExtension;
    }

    public static string EnsureBundle(string pageName)
    {
        var bundleName = "~/styles/" + pageName;
        var bundle = BundleTable.Bundles.GetBundleFor(bundleName);
        if (bundle == null)
        {
            bundle = new StyleBundle(bundleName).Include(
                "~/styles/site.css",
                "~/styles/" + pageName + ".css");
            BundleTable.Bundles.Add(bundle);
        }
        return bundleName;
    }
}

Usage:

<link rel="stylesheet" type="text/css" href="<%: MyStyleHelper.RenderPageSpecificStyle(Page.AppRelativeVirtualPath) %>" />

Problem

I just began working with VS 2012 RC. I've created a test site with a master page and a single web form. Currently, I'm using this code to bundle the entire `Styles` folder on the site: Global.asax ``` BundleTable.Bundles.EnableDefaultBundles(); ``` Site.master ``` <link rel="stylesheet" type="text/css" href="Styles/css" /> ``` Question: The test site has a site-level CSS file that controls the overall look and feel of the site. In addition to the site-level CSS, each page could have their own CSS definitions. Is it possible to include only the `site.css` file in the master page, and then conditionally add .css files to the bundle as each page requires? I tried this in the code behind of `Default.aspx` but it didn't work: ``` BundleTable.Bundles.Add(new Bundle("~/Styles/Default.css")); ```

Original source

Related problems