Less.js ルールを動的にロードする

Less.js を Web サイトに組み込むと、スタイル機能を強化できます。ただし、Less.js スクリプトの前にすべての LESS スタイルシートを読み込む必要があるという制限が 1 つあります。これは、最初のページ読み込み後に特定のスタイルを動的に読み込む必要がある場合に問題が生じる可能性があります。

現在の制限事項

現在、Less.js は外部を読み込む順序を規定しています。スタイルシートとスクリプトは重要な役割を果たします。以下に示すように順序を逆にすると、Firefox と Chrome の両方で style.less ファイルの読み込みに失敗します:

Less.js v1.0.31 のソリューション

この制限に対処するために、Less.js のバージョン 1.0.31 では、less.refreshStyles() と呼ばれるメソッドが導入されました。このメソッドにより、属性「type='text/less'」を持つ

動的読み込みの実装

Less の動的読み込みを実装するには。 js ルールについては、次の手順に従ってください:

1. Less.js バージョン 1.0.31 を使用していることを確認してください。
2. Less.js スクリプトの後に、「type='text/less'」属性を持つ
3. 動的に適用する LESS ルールをその中に追加します。
4. less.refreshStyles() を呼び出して再コンパイルし、新しいスタイルを適用します。 rules.

例:

JavaScript の場合:

less.refreshStyles();