less.modifyVars not working in Asp.Net MVC

Question

I have read this tutorial for working with Less in Asp.Net MVC5.

To integrate LESS in ASP.NET MVC, I download and install the dotless NuGet package.

And then added this bundle:

var lessBundle = new Bundle("~/Less").Include("~/Content/Less/*.less");
lessBundle.Transforms.Add(new LessTransform());
lessBundle.Transforms.Add(new CssMinify());
bundles.Add(lessBundle);

Here is the LessTransform:

public class LessTransform : IBundleTransform
{
  public void Process(BundleContext context, BundleResponse response)
  {
    response.Content = dotless.Core.Less.Parse(response.Content);
    response.ContentType = "text/css";
  }
}

So far so good. Everything works as it is expected.

Here is the part from my .less file:

@CustomMessageBackgroundColor: #65B6A7;

div.custom-dialog {
    ...
    background: @CustomMessageBackgroundColor;
}

Now, I want to change the value of this variable from .js file dynamically:

less.modifyVars({ '@CustomMessageBackgroundColor': 'blue' });
less.refreshStyles();

But, this is not working. I have read all SO questions and as I understand this must work.

Thanks.

Answer 1

You are mixing up two different LESS compiler implementations.

Your javascript call might work if you were using less.js in the browser to compile your stylesheets, but since you're compiling them on the server side with dotless, what you are getting to the browser is the compiled CSS which no longer contains the variables -- they are already expanded at that point.