web-dev-qa-db-fra.com

Charger dynamiquement les règles less.js

Je cherche à utiliser less . js (belle apparence), mais notre site nécessite que certains styles soient chargés de manière dynamique après le chargement initial de la page. Il semble toutefois que toutes les feuilles de style LESS doivent être chargées avant le chargement du script less.js. c'est-à-dire que cela fonctionne

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

mais cela échoue si les lignes sont permutées, ni firefox ni chrome ne semblent tenter de charger 'style.less' sauf si elles sont commandées correctement. La nécessité de commander est explicitement notée dans ce tutoriel .

Est-il possible de charger moins de feuilles de style après le chargement initial de la page?

Notez que ce blog décrit une fonctionnalité de "surveillance" -

qui actualise automatiquement le CSS chaque fois que vous enregistrez votre code MOINS

il semble donc raisonnable de penser que je pourrais ajouter quelques règles MOINS après le chargement de la page. On se sent comme je manque quelque chose.

À votre santé,

Colin

UPDATE: code utilisé pour tester le comportement décrit dans les commentaires (moins la feuille de style listée après le script) -

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Simple</title>

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  <script src="/static/js/less-1.0.31.min.js"></script> 
  <link rel="stylesheet/less" href="/static/less/style.less" id="abc123"/>
</head>
<body>
  <div id="container">
    <div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
  </div>
  <div id="#abc">Bingo</div>
</body>

<script>
console.log("refreshing styles...");
less.sheets.Push(document.getElementById('abc123'));
//var lessStyle = $("<style>#abc { color: blue; }</style>").attr("id", "less:static-less-style").attr("type", 'text/less');
//$("head").append(lessStyle);
less.refresh(true);
console.log("refreshed...");
</script>
</html>

et moins la feuille de style

@primary_color: green;

.rounded(@radius: 5px) {  
  -moz-border-radius: @radius;  
  -webkit-border-radius: @radius;  
  border-radius: @radius;  
}

#container {
  background: @primary_color;
  .rounded(5px);

  div {
    color: red;
  }
}
javascriptcssless
23
hawkett

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

28
cloudhead

merci d'avoir posé cette question - cela m'a beaucoup aidé. Je ne fais que mettre à jour le sujet afin de montrer comment j'ai ajouté dynamiquement un fichier CSS.

J'ai utilisé la dernière version de LESS (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();
11
St3ph

Vous pouvez utiliser cette bibliothèque légère (3k) pour charger paresseux des fichiers/css et js (disclaimer: je suis l'auteur).

C'est aussi simple que:

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

Il peut également recevoir un rappel, charger des ressources supplémentaires avec des dépendances et s'occuper du cache.

2
Oren Yakobi

J'ai trouvé une version actualisée du script qui fonctionne parfaitement avec le fichier LESS:

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

Au lieu d'utiliser

less.refreshStyles()

utilisation

less.refresh()
0
sapir