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?
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.