LESS スタイルシートの動的読み込み

最初のページに続いて特定のスタイルの動的読み込みを必要とする LESS.js の利用に興味を示しました。負荷。ただし、LESS.js の既存の動作では、以下の機能例で示すように、LESS.js スクリプトの前にすべての LESS スタイルシートをロードする必要があります。

この順序が逆の場合、Firefox やChrome は、スタイルシートがスクリプトの前にない限り、スタイルシートを読み込もうとします。この順序付け要件は、LESS.js の解析プロセスの性質により強制されます。

less.refreshStyles() の紹介

動的なスタイルのニーズに対応するため、バージョン 1.0 LESS.js の .31 では、less.refreshStyles() メソッドが導入されています。このメソッドにより、type="text/less" を使用した

この機能を実装するには、動的 LESS スタイルシートをロードした後に次の行を組み込むだけです:

less.refreshStyles();

コード例

機能をデモンストレーションするために、提供したテスト コード スニペットを変更できます。スタイルシートの動的読み込みの後に次の行を含めます:

この変更により、LESS.js に動的スタイルシートを再コンパイルするよう指示され、ページをリロードしなくても有効になるようになります。