如何使用 less.js 在頁面載入後動態載入和編譯 LESS 樣式表？

動態載入less.js 規則

頁面載入後動態載入樣式在使用less.js 時會帶來挑戰，因為它需要所有LESS 樣式表在less.js 腳本之前載入。

為了解決這個問題，less.js 1.0.31 版本引進了 less.refreshStyles() 方法。此方法可讓您重新編譯

<code class="html"><script>
  less.sheets.push(document.getElementById('abc123'));
  less.refreshStyles();
</script></code>

此程式碼會擷取 ID 為「abc123」的樣式表並動態編譯它。您可以在載入 less.js 腳本後將此程式碼新增至頁面中，以動態載入 LESS 樣式表。

範例

考慮以下測試程式碼：

<code class="html"><!-- Style sheet after less.js script -->
<script src="/static/js/less-1.0.31.min.js"></script> 
<link rel="stylesheet/less" href="/static/less/style.less" id="abc123"/></code>

<code class="javascript">console.log("refreshing styles...");
less.sheets.push(document.getElementById('abc123'));
less.refreshStyles(true);
console.log("refreshed...");</code>

在此範例中，樣式表在less.js 腳本之後載入。 less.sheets.push() 方法將樣式表加入 less.js 管理的樣式表陣列中。然後，呼叫 less.refreshStyles() 動態重新編譯樣式表。

以上是如何使用 less.js 在頁面載入後動態載入和編譯 LESS 樣式表？的詳細內容。更多資訊請關注PHP中文網其他相關文章！