less.js ルールを動的に読み込む ページ読み込み後にスタイルを動的に読み込むと、less.js を使用するときに課題が発生します。これは、すべての LESS スタイルシートが必要となるためです。 この問題を解決するために、less.js のバージョン 1.0.31 では、less.refreshStyles() メソッドが導入されています。このメソッドを使用すると、 を再コンパイルできます。 type="text/less" のタグを動的に追加します。使用方法は次のとおりです。</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre><code class="html"><script> less.sheets.push(document.getElementById('abc123')); less.refreshStyles(); </script></code></pre><div class="contentsignin">ログイン後にコピー</div></div> <p>このコードは、ID 'abc123' のスタイルシートを取得し、動的にコンパイルします。 LESS スタイルシートを動的にロードするために、less.js スクリプトがロードされた後にこのコードをページに追加できます。</p> <p><strong>例</strong></p> <p>次のテスト コードを考えてみましょう:</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre><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></pre><div class="contentsignin">ログイン後にコピー</div></div> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre><code class="javascript">console.log("refreshing styles..."); less.sheets.push(document.getElementById('abc123')); less.refreshStyles(true); console.log("refreshed...");</code></pre><div class="contentsignin">ログイン後にコピー</div></div> <p>この例では、less.js スクリプトの後にスタイルシートがロードされます。 less.sheets.push() メソッドは、less.js が管理するスタイルシートの配列にスタイルシートを追加します。次に、less.refreshStyles() が呼び出され、スタイルシートが動的に再コンパイルされます。</p>
