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.

Rytmis · Accepted Answer · 2015-06-01 13:16:33Z

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.

answered Jun 1, 2015 at 13:16

Rytmis

32.1k8 gold badges62 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Farhad Jabiyev Over a year ago

Thanks for the answer. So I must use Less.js instead of dotless? To tell the truth I want to chnage ui theme based on user choice. So, I have decide to use Less.

Rytmis Over a year ago

Must is a strong word. Dotless supports dynamic variables via query string parameters, but then bundling becomes a bit problematic. It all depends on what you really need to accomplish, but might be that less.js is your best bet here. :)

Farhad Jabiyev Over a year ago

I havemade another investiagtion. And found that Web Essentials already supported .less files. But, I don't know how can I chnage the variables from javascript? Do you have any practice with that?

Rytmis Over a year ago

If you preprocess them before they are sent to the client, you can not change the variables at the client's side.

Farhad Jabiyev Over a year ago

I got it. Thanks. I have misunderstood this process.

|

Collectives™ on Stack Overflow

less.modifyVars not working in Asp.Net MVC

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related