Less.modifyVars does not update the LESS variable

Question

My project has a required topic for editing. User value should be able to change the different colors used in the application.

I imported less.js (version 1.7.0) into my project, and I successfully called the less.modifyVars () function from my javascript, but for some reason my fewer files are not being updated.

My stylesheet is dynamically compiled by grunt. This is the code in the HTML header:

<link rel="stylesheet/less" type="text/css" href="/static/<%= grunt.config.get('pkg.name') %>.css"/>

And after that I included a less.js script.

Then I get this line of code just to change a specific variable:

less.modifyVars({ '@mainColor': '#CCC' });

And I know that it was successfully called because I see them in the browser console:

less: parsed http://localhost:3000/static/app.css successfully. less-1.7.0.js:7297
less: css for http://localhost:3000/static/app.css generated in 181ms less-1.7.0.js:7297
less: less has finished. css generated in 182ms

But the problem is that when I check the supposedly updated CSS file, the various properties that use the @mainColor variable were not updated with a new color.

CSS.

, , . , , ?