動態載入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中文網其他相關文章！
