我使用的bootstrap定义了很多较少的变量，以@body-bg为例。我创建了一个定义 @background 的颜色主题。为了将两者粘合在一起，我执行以下操作:
@body-bg: @background
现在，我希望能够在颜色主题之间切换。因此，我使用 less 的监视功能来更改 @background，但 less 似乎并未将其传播到 @body-bg，并且实际上切换到 Bootstrap 默认值。
我不想执行以下任何操作
less.modifyVars({ '@body-bg': '#FFFF00' })less.modifyVars({ '@background': '#FFFF00', '@body-bg': '@background' })
因为还有许多其他变量是从 @background 定义的。
这是一些测试页面。
问题.htm
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet/less" type="text/css" href="problem.less" />
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/1.4.1/less.min.js#!watch" type="text/javascript"></script>
</head>
<body>
<a href="#" onclick="less.modifyVars({ '@background': '#FF0000' })">Apple Style!</a>
<a href="#" onclick="less.modifyVars({ '@background': '#FFFF00' })">Banana Style!</a>
</body>
</html>
问题较少
@background: #FF0000;
@import "bootstrap/bootstrap.less";
@body-bg: @background;
最佳答案
问题似乎是，如果 less.env 设置为 product 导入的文件会以一种奇怪的方式缓存，并且在调用 less.modifyVars()请参见此处:
<强> https://github.com/less/less.js/pull/721#issuecomment-11611703
因此将环境设置为开发似乎可以解决问题:
DEMO
修改后的标记:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet/less" type="text/css" href="less/problem.less" />
<script type="text/javascript">
less = { env: "development" };
</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/1.4.1/less.min.js#!watch" type="text/javascript"></script>
</head>
<body>
<a href="javascript:void(0)" onclick="less.modifyVars({ '@background': '#FF0000' })">Apple Style!</a>
<a href="javascript:void(0)" onclick="less.modifyVars({ '@background': '#FFFF00' })">Banana Style!</a>
</body>
</html>
关于twitter-bootstrap - 修改 Bootstrap 中监视的 LESS 变量，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19734289/