使用JavaScript动态更改页面中的LESS变量

dynamically change LESS variables in page with JavaScript

本文关键字：LESS 变量 JavaScript 动态 使用      更新时间：2023-09-26

我试图使用LESS .js与JavaScript动态修改LESS变量。然而，我似乎不能让它与modifyVars, watch或refresh一起工作。

我尝试在加载less.js之前放置样式表链接标签，使用less.modifyVars({'@bg': '#00ff00'})，但背景没有发生变化。我使用的less文件很简单:

@bg: #000;
body { background-color: @bg; }

我还尝试将样式表链接标签放在less.js之后，如本问题所述，并使用less.sheets.push($('#less-link')[0])，然后调用modifyVars，然后调用refresh。背景颜色没有变化。

我还尝试在LESS文件中注释@bg: #000;，然后通过modifyVars设置它。没有运气:我最终得到了一个Less::ParseError: variable @bg is undefined。

如何动态更改LESS变量并更新页面外观以反映这些更改?

编辑:嗯，这可能是一些Rails魔法发生了。当我加载我的less文件时，变量定义消失了，我看到的只是body { background-color: #000; }。当我切换到使用嵌入在页面中的LESS的<style type="text/less">块并使用此覆盖LESS JavaScript时，我能够使用less.Override('@bg', '#00ff00')更改变量，并且页面的背景颜色立即改变。多亏了这个答案。现在我将尝试使用less.js使用<style>标签而不是<link>。

编辑:看起来像LESS -1.3.3.min.js希望LESS在link标签中加载-当我尝试使用modifyVars时，我得到TypeError: Cannot read property 'href' of undefined，我的页面看起来像这样:

<style type="text/less">
@bg: #000;
body {
  background-color: @bg;
}
</style>
<script src="/assets/less-1.3.3.min.js?body=1" type="text/javascript"></script>

由于我是在Rails应用程序中进行的，所以我没有将变量替换为客户端，而是将其移动到服务器端。我使用LESS的Ruby绑定来解析一些包含自定义变量的LESS，使用content_type: 'text/css'呈现解析结果，并使用AJAX请求向呈现的CSS添加样式表链接。

相关文章：