如何在頁面載入後動態載入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中文網其他相關文章！