Why is MVC4 @Styles.Render() not behaving as expected in debug mode

Question

I am implementing the bundling and minification support in MVC4 and setting it up so it can compile my Bootstrap .less files automatically for me. I have the following code in my BundleConfig.cs file

public class BundleConfig
{
    public static void RegisterBundles(BundleCollection bundles)
    {
        // base bundles that come with MVC 4

        var bootstrapBundle = new Bundle("~/bundles/bootstrap").Include("~/Content/less/bootstrap.less");
        bootstrapBundle.Transforms.Add(new TwitterBootstrapLessTransform());
        bootstrapBundle.Transforms.Add(new CssMinify());
        bundles.Add(bootstrapBundle);
    }
}

The TwitterBootsrapLessTransform is as follows (it is more complicated than I would like because of the need to import the sub .less files into dotLess)

public class TwitterBootstrapLessTransform : IBundleTransform
{
    public static string BundlePath { get; private set; }

    public void Process(BundleContext context, BundleResponse response)
    {
        setBasePath(context);

        var config = new DotlessConfiguration(DotlessConfiguration.GetDefault());
        config.LessSource = typeof(TwitterBootstrapLessMinifyBundleFileReader);

        response.Content = Less.Parse(response.Content, config);
        response.ContentType = "text/css";
    }

    private void setBasePath(BundleContext context)
    {
        BundlePath = context.HttpContext.Server.MapPath("~/Content/less" + "/imports" + "/");
    }
}

public class TwitterBootstrapLessMinifyBundleFileReader : IFileReader
{
    public IPathResolver PathResolver { get; set; }
    private string basePath;

    public TwitterBootstrapLessMinifyBundleFileReader(): this(new RelativePathResolver())
    {
    }

    public TwitterBootstrapLessMinifyBundleFileReader(IPathResolver pathResolver)
    {
        PathResolver = pathResolver;
        basePath = TwitterBootstrapLessTransform.BundlePath;
    }

    public bool DoesFileExist(string fileName)
    {
        fileName = PathResolver.GetFullPath(basePath + fileName);

        return File.Exists(fileName);
    }

    public byte[] GetBinaryFileContents(string fileName)
    {
        throw new System.NotImplementedException();
    }

    public string GetFileContents(string fileName)
    {
        fileName = PathResolver.GetFullPath(basePath + fileName);

        return File.ReadAllText(fileName);
    }
}

On my base _Layout.cshtml page I attempted to render the css files by doing this

@Styles.Render("~/bundles/bootstrap");

as is suggested by the mvc tutorial but the file the client browser ends up requesting is

http://localhost:53729/Content/less/bootstrap.less

which causes an error. If I put the following link into by base layout page it works as expected.

<link href="~/bundles/bootstrap" rel="stylesheet" type="text/css" />

Why isn't @Styles.Render() behaving in the same way in debug mode? It works in release mode. I can understand how you don't want it bundling and minifying in debug but how can I force this bundle to work the same way always?

I found this code snippet very useful. You should consider making a blog post about how you got Twitter Bootstrap and Dotless working together. — Rebecca
Thanks, maybe when I get some more time for myself I'll start blogging. — PlTaylor
@PITaylor Out of interest are you seeing the following types of errors in the css output: Minification failed. Returning unminified contents. (1381,2): run-time error CSS1019: Unexpected token, found '{'... — Rebecca
I had a problem with the kendo min css file. The greasemonkey minifier seems to be kinda sensitive. — PlTaylor

Hao Kung Hao Kung · Accepted Answer · 2012-06-29T22:46:17

So basically when debug="true", the Script/Style Render methods assume that Optimizations are off, meaning no bundling and no minification, which means it will not call into your transform; instead, it will just render out links to the raw contents of the bundle (Which is boostrap.less in your case).

You can override this behavior and always run optimization by setting BundleTable.EnableOptimizations = true. This will force the render methods to always do bundling/minification.

Why is MVC4 @Styles.Render() not behaving as expected in debug mode

3 Answers