Carico less.js regole in modo dinamico

StackOverflow https://stackoverflow.com/questions/3175013

  •  02-10-2019
  •  | 
  •  

Domanda

Sto cercando di utilizzare meno . js (sembra grande), ma il nostro sito richiede che alcuni stili essere caricati dinamicamente dopo il caricamento della pagina iniziale. Sembra tuttavia che tutti i fogli di stile MENO devono essere caricati prima del carico less.js script. vale a dire funziona questo 

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

, ma non riesce se le linee sono scambiati in giro, né Firefox né Chrome sembrano tentare di carico 'style.less' a meno che non sono ordinate correttamente. Il requisito di ordinamento è notato in modo esplicito nel questo tutorial .

C'è un modo per caricare i fogli di stile meno dopo caricamento della pagina iniziale?

Si noti che questo blog descrive una caratteristica 'orologio' -

  

, che si auto-aggiornare la CSS voi ogni volta che salvare il vostro codice MENO

così sembra ragionevole aspettarsi che potrei aggiungere alcune norme meno dopo il caricamento della pagina. Si sente come mi manca qualcosa.

Saluti,

Colin

UPDATE: codice utilizzato per il comportamento di prova descritto nei commenti (meno foglio di stile elencato dopo che lo 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>

e il meno foglio di stile 

@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;
  }
}
È stato utile?

Soluzione

Ho appena spinto 1.0.31 - ha un metodo:. less.refreshStyles() che sarà ri-compilazione tag <style> con type="text/less" - provalo e fammi sapere se funziona

Altri suggerimenti

grazie per aver posto questa domanda - che mi ha aiutato molto. Sto solo l'aggiornamento del tema al fine di mostrare come ho fatto aggiungere dinamicamente un file CSS.

ho usato l'ultima versione di 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();

È possibile utilizzare questo leggero (3k) libreria per carico pigro meno / CSS e JS file ( disclaimer: io sono l'autore)

.

Questa è semplice come: 

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

Si può anche ricevere una richiamata, caricare alcuni più beni con le dipendenze e si prende cura sulla cache.

Ho trovato una versione up-to-date dello script che funziona perfettamente con il file MENO: 

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

Invece usando 

less.refreshStyles()

utilizzo 

less.refresh()
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top