Ładuj mniej.JS rules Dynamic

Patrzę na użycie mniej . js (wygląda świetnie), ale nasza strona wymaga dynamicznego ładowania niektórych stylów po początkowym załadowaniu strony. Wydaje się jednak, że wszystkie arkusze stylów LESS muszą być ładowane przed less.Ładowanie skryptu js. czyli to działa 

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

Ale nie powiedzie się, jeśli linie są zamienione wokół, ani firefox ani chrome wydają się próbować załadować ' styl.mniej", chyba że są prawidłowo zamówione. Wymóg zamawiania jest wyraźnie zaznaczony w to tutorial .

Czy Jest jakiś sposób, aby załadować mniej arkuszy stylów po początkowym załadowaniu strony?

Zauważ, że ten blog opisuje funkcję "obserwuj" -

Który automatycznie odświeży CSS za każdym razem, gdy zapiszesz mniej kodu

Więc wydaje się rozsądne oczekiwać, że mogę dodać trochę mniej reguł po załadowaniu strony. Czuję, że coś przeoczyłem.

Zdrówko,]}

Colin

UPDATE: kod używany do testowania zachowania opisanego w komentarzach (mniej arkusz stylów podany po skrypcie) - 

<!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>

I mniej arkusza stylów 

@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;
  }
}
Author: hawkett, 2010-07-04
Source

3 answers

Właśnie wypchnąłem 1.0.31-ma on metodę: less.refreshStyles(), która ponownie skompiluje <style> znaczniki z type="text/less" - wypróbuj i daj znać, czy działa.

 28
Author: cloudhead,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-07-05 10:38:46

Dzięki, że zadałeś to pytanie – Bardzo mi pomogło. Po prostu aktualizuję temat, aby pokazać, jak dynamicznie dodałem plik CSS.

Użyłem ostatniej wersji 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
Author: St3ph,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-01-09 09:15:42

Możesz użyć tej lekkiej (3K) biblioteki do leniwego ładowania plików less / css i js (zastrzeżenie: jestem autorem).

To jest tak proste jak: 

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

Może również odbierać wywołanie zwrotne, ładować więcej zasobów z zależnościami i dba o pamięć podręczną.

 2
Author: Oren Yakobi,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-07-07 06:23:08