Question

我使用的bootstrap定义了更少的变量，以@body-bg为例。我创建了一个定义@background的颜色主题。要将两者粘合在一起，我会执行以下操作：

@body-bg: @background

现在，我希望能够在颜色主题之间切换。因此，我使用较少的'监视功能来更改@background，但似乎没有将其传播到@ body-bg并且它实际上切换到引导程序默认值。

我不想做以下任何一种

less.modifyVars({ '@body-bg': '#FFFF00' })
less.modifyVars({ '@background': '#FFFF00', '@body-bg': '@background' })

因为还有许多其他变量是从@background定义的。

以下是一些测试页。

Problem.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>

problem.less

@background: #FF0000;
@import "bootstrap/bootstrap.less";
@body-bg: @background;

Answer 1

问题似乎是，如果将less.env设置为production，导入的文件会以奇怪的方式缓存，并且在调用less.modifyVars()后不会加载，请参阅此处：< / p>

<强> https://github.com/less/less.js/pull/721#issuecomment-11611703

因此，将环境设置为development似乎可以解决问题：

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>

在Bootstrap中修改监视的LESS变量

1 个答案:

DEMO