Charge less.js règles dynamiquement

Question

Je cherche à utiliser moins . js () ressemble beaucoup, mais notre site exige que certains styles soient chargés dynamiquement après chargement de la page initiale. Il semble, cependant, que tous les feuilles de style moins doivent être chargées avant la charge de script less.js. à savoir fonctionne ce

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

mais il échoue si les lignes sont interchangés, ni Firefox, ni chrome semblent tenter de chargement « style.less » à moins qu'ils sont commandés correctement. L'exigence de commande est noté explicitement dans ce tutoriel .

Est-il possible de charger moins après stylesheets chargement de la page initiale?

Notez que

Était-ce utile?

Nous faire parvenir

La solution

Je viens poussé 1.0.31 - il a une méthode:. less.refreshStyles() qui recompiler les balises <style> avec type="text/less" - essayer et laissez-moi savoir si cela fonctionne

Answer 1

Je viens poussé 1.0.31 - il a une méthode:. less.refreshStyles() qui recompiler les balises <style> avec type="text/less" - essayer et laissez-moi savoir si cela fonctionne

Answer 2

Merci d'avoir posé cette question - il m'a beaucoup aidé. Je met à jour juste le sujet afin de montrer comment je l'ai fait ajouter dynamiquement un fichier CSS.

J'utilisé la dernière version de moins (1.3.3).

var stylesheetFile = 'file.css';
var link  = document.createElement('link');
link.rel  = "stylesheet";
link.type = "text/less";
link.href = stylesheetFile;
less.sheets.push(link);

less.refresh();

Answer 3

Vous pouvez utiliser ce léger (3k) bibliothèque charge paresseux fichiers moins / css et js ( Avertissement: Je suis l'auteur)

.

Ceci est aussi simple que:

lazy.load('/static/less/style.less');

Il peut également recevoir un rappel, charger des plus actifs avec dépendances et prend soin de cache.

Answer 4

J'ai trouvé une version mise à jour du script qui fonctionne parfaitement avec le fichier MOINS:

  <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.0.0/less.min.js"></script>

Au lieu en utilisant

less.refreshStyles()

utilisation

less.refresh()