问题
My project has a requirement to have a user-editable theme. Meaning the users should have the ability to change the different colors used in the application.
I've imported less.js (version 1.7.0) into my project and I've successfully called the less.modifyVars() function from my javascript but for some reason my less file isn't getting updated.
My stylesheet is dynamically compiled by grunt. This is the code in head of the HTML:
<link rel="stylesheet/less" type="text/css" href="/static/<%= grunt.config.get('pkg.name') %>.css"/>
And I've included the less.js script after that.
I then have this line of code just to modify a specific variable:
less.modifyVars({ '@mainColor': '#CCC' });
And I know it's being successfully called because I can see these in my 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 when I inspect the supposedly updated CSS file, the different properties that use the variable @mainColor have not been updated with the new color.
Even when running the command in the browser console does not update anything in the CSS.
I've looked everywhere and I don't know what else to do. Any other ideas on what I could be doing wrong or what I can do to make this work?
来源：https://stackoverflow.com/questions/22499241/less-modifyvars-not-updating-less-variable