2

我正在使用定义更少变量@body-bg的引导程序，例如。我创建了一个定义@background. 要将两者粘合在一起，我执行以下操作：

@body-bg: @background

现在，我希望能够在颜色主题之间切换。所以我使用 less 的 watch 功能来改变@background，但 less 似乎并没有将它传播到 @body-bg 并且它实际上切换到引导程序默认值。

我不想做以下任何一个

  • 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;
4

1 回答 1

5

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

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

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

演示

修改后的标记：

<!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>
于 2013-11-01T22:26:23.727 回答