以下内容都是浏览器最终运行的代码,如果是 react 或者 vue 的必须是编译之后的文件
html 中须要有一些内容
<link rel="stylesheet/less" type="text/css" href="/color.less" />
<script>
window.less = {
async: false,
env: "production" //production development
};
</script>
<script src="https://cdn.bootcss.com/less.js/2.7.3/less.min.js"></script>
这样在 js 中就能够间接批改变量了
$('#color-switch a').click(function() {var value = $(this).text();
less.modifyVars({'@my-color': value});
less.refreshStyles();// 如同可有可无});
下面那个 color.less 文件中必须有这个变量的定义和应用
@my-color:red;
.mydiv{color:@my-color;}
如果 less 文件中没有这个变量的定义或者没有这个变量的应用,js 切换是没有成果的