如何在初始頁面載入後動態載入 Less.js 規則？-css教學-PHP中文網

如何在初始頁面載入後動態載入 Less.js 規則？

Patricia Arquette

發布： 2024-10-24 19:41:02

原創

804 人瀏覽過

How can I dynamically load Less.js rules after the initial page load?

動態載入Less.js規則

將Less.js合併到網站中可以增強其樣式功能。然而，遇到的一個限制是需要在 Less.js 腳本之前載入所有 LESS 樣式表。當某些樣式需要在初始頁面載入後動態載入時，這可能會帶來挑戰。

當前限制

目前，Less.js 規定載入外部的順序樣式表和腳本起著至關重要的作用。顛倒順序，如下圖，在Firefox 和Chrome 中都無法載入style.less 檔案：

<link rel="stylesheet/less" href="/static/less/style.less"/>
<script src="http://lesscss.googlecode.com/files/less-1.0.30.min.js"></script>

登入後複製

Less.js v1.0.31 中的解

為了解決這個限制，Less.js 1.0.31 版本引進了一個名為less.refreshStyles() 的方法。此方法可以重新編譯

實作動態載入

實作 Less 的動態載入。要使用 Node.js 規則，請按照以下步驟操作：

確保您使用的是 Less.js 版本 1.0.31 或更高版本。在 Less.js 腳本後面加上「type='text/less'」屬性的標籤。
在
呼叫 less.refreshStyles() 重新編譯並套用新規則。
範例：

在 JavaScript 中：

<code class="html"><head>
  <script src="http://lesscss.googlecode.com/files/less-1.0.31.min.js"></script>
  <style type='text/less'>
  #container {
    background: green;
  }
  </style>
</head></code>

登入後複製

以上是如何在初始頁面載入後動態載入 Less.js 規則？的詳細內容。更多資訊請關注PHP中文網其他相關文章！