2

@body-bg例として、より少ない変数を定義するブートストラップを使用しています。を定義するカラーテーマを作成しました@background。2つを接着するには、次のようにします。

@body-bg: @background

今、私は色のテーマを切り替えることができるようにしたいと考えています. そのため、less の監視機能を使用して を変更しまし@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

The problem seems to be that if less.env is set to production the imported files get cached in a weird way and don't get loaded after you call less.modifyVars() see here:

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

So setting the environment to development seems to fix the problem:

DEMO

Modified markup:

<!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 に答える