如何在页面加载后动态加载LESS规则？

动态加载 LESS 规则

预先存在的限制

最初必须加载 LESS 样式表在 less.js 脚本之前。这是因为脚本在渲染之前解析和解释 LESS 样式。颠倒此顺序将导致没有样式解释。

动态加载解决方案

less.js 1.0.31 版本引入了 less.refreshStyles() 方法。该方法重新编译

使用示例

要在页面加载后动态加载 LESS 规则，请按照以下步骤操作：

1. 包含 less.js 脚本。
2. 确保您希望动态加载的 LESS 样式表在
3. 调用 less.refreshStyles() 方法来编译 LESS 规则。

更新了测试用例

以下更新的代码示例演示了动态加载过程：

<code class="html"><script src="http://lesscss.googlecode.com/files/less-1.0.31.min.js"></script> 
<link rel="stylesheet/less" href="/static/less/dynamic.less" id="abc123"/>

<script>
console.log("refreshing styles...");
less.refreshStyles();
console.log("refreshed...");
</script></code>

LESS 样式表

<code class="less">@primary_color: green;

#container {
  background: @primary_color;
  border-radius: 5px;

  div {
    color: red;
  }
}</code>

通过调用 less.refreshStyles( ) 方法中，

以上是如何在页面加载后动态加载LESS规则？的详细内容。更多信息请关注PHP中文网其他相关文章！