Menu
In a simple ASP.Net MVC4 test application, I installed the dotless NuGet package and followed this tutorial.
My .less files are being correctly parsed to CSS and work fine when debug=true.
<link href="/Public/less/main.less" rel="stylesheet"/>
<link href="/Public/less/home.less" rel="stylesheet"/>
<link href="/Public/less/a.less" rel="stylesheet"/>
<link href="/Public/less/b.less" rel="stylesheet"/>
<link href="/Public/less/c.less" rel="stylesheet"/>
However when I set debug=false in order to have it minify and combine to a single stylesheet, I get this:
<link href="/Public/less?v=" rel="stylesheet"/> // NOT WORKING!
Here's my bundle configuration file; again, taken directly from the tutorial:
public class BundleConfig
{
// For more information on Bundling, visit http://go.microsoft.com/fwlink/?LinkId=254725
public static void RegisterBundles(BundleCollection bundles)
{
// Compile .less files and create a bundle for them.
var lessBundle = new Bundle("~/Public/less").Include(
"~/Public/less/main.less",
"~/Public/less/home.less",
"~/Public/less/a.less",
"~/Public/less/b.less",
"~/Public/less/c.less");
lessBundle.Transforms.Add(new LessTransform());
lessBundle.Transforms.Add(new CssMinify());
bundles.Add(lessBundle);
}
}
And in my Layout file:
<head>
@Styles.Render("~/Public/less")
</head>
And here's my LessTransform class:
public class LessTransform : IBundleTransform
{
public void Process(BundleContext context, BundleResponse response)
{
response.Content = dotless.Core.Less.Parse(response.Content);
response.ContentType = "text/css";
}
}
Any ideas on why the bundle is not working properly on debug=false?
422
Bundling and Minification in MVC 4.0 by default is disable in debug mode, because minification and bundling make debugging very hard or even sometimes impossible. You can test it by setting a break point on LessTransform.Process method. LessTransform.Process only invoked when the project run with debug = false or BundleTable.EnableOptimizations = true.
<link href="/Public/less?v=" rel="stylesheet"/> means the result of the bundle was empty.
Please make sure at least one of the less files produce the CSS content, if so check the LessTransform class it must be:
public class LessTransform : IBundleTransform
{
void IBundleTransform.Process(BundleContext context, BundleResponse response)
{
response.Content = Less.Parse(response.Content);
response.ContentType = "text/css";
}
}
By putting BundleTable.EnableOptimizations = true; in RegisterBundles method you can override default setting of optimization mechanism (Bundling and minification) in debug mode then you can debug and check the result of Less.Parse(response.Content);
127
The issue was a silent error when compiling the .less into css.
I used a breakpoint to check my LessTransform class which uses the dotless library to compile.
public class LessTransform : IBundleTransform
{
public void Process(BundleContext context, BundleResponse response)
{
response.Content = Less.Parse(response.Content); // Breakpoint here.
response.ContentType = "text/css";
}
}
I noticed that when hovering over response.Content I could see my less code, but after the Less.Parse code, response.Content would become empty.
I ran my less code through a checker and noticed a syntax error in my code.
Once I fixed my error, the bundling and minification worked properly as expected.
26
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With