gpt4 book ai didi

twitter-bootstrap - 修改 Bootstrap 中监视的 LESS 变量

转载 作者:行者123 更新时间:2023-12-02 21:44:43 26 4
gpt4 key购买 nike

我使用的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/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com