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

Question

我正在尝试使用less.js动态修改LESS变量。但是，我似乎无法使用modifyVars，watch或refresh。

我在使用less.modifyVars({'@bg': '#00ff00'})加载less.js之前尝试放置样式表链接标记，但后台没有发生任何变化。我使用的文件越少越简单：

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

我还尝试将样式表链接标记放在less.js之后，如this question中所述，然后使用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; }。当我切换到使用页面中嵌入的<style type="text/less"> LESS块并使用this override LESS JavaScript时，我能够使用less.Override('@bg', '#00ff00')更改变量，并立即更改页面的背景颜色。感谢this answer。现在，我将使用<style>代码而不是<link>与less.js一起尝试。

编辑：看起来更少 - 1.3.3.min.js希望在link标签中加载LESS - 当我尝试使用{时，我得到TypeError: Cannot read property 'href' of undefined {1}}我的页面如下所示：

modifyVars

Answer 1

而不是替换客户端的变量，因为无论如何我在Rails应用程序中执行它，我将其移动到服务器端。我正在使用Ruby bindings for LESS解析包含我的自定义变量的一些LESS，使用content_type: 'text/css'呈现解析结果并使用AJAX请求将样式表链接添加到呈现的CSS。