Загружать less.js правила динамически

Я смотрю на использование less. js (отлично смотрится), но наш сайт требует, чтобы некоторые стили загружались динамически после начальной загрузки страницы. Кажется, однако, что все таблицы стилей LESS должны быть загружены до загрузки less.js script. т.е. это работает

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

но он терпит неудачу, если строки обмениваются, ни firefox, ни chrome не пытаются загрузить "style.less", если они не упорядочены правильно. Требование упорядочения явно указывается в этом учебнике.

Есть ли способ загрузить меньше таблиц стилей после загрузки начальной страницы?

Обратите внимание, что этот блог описывает функцию "смотреть" -

который будет автоматически обновлять CSS всякий раз, когда вы сохраняете код LESS

поэтому представляется разумным ожидать, что после загрузки страницы я смогу добавить некоторые правила LESS. Похоже, что я что-то пропустил.

Приветствия,

Колин

UPDATE: код, используемый для проверки поведения, описанного в комментариях (менее таблица стилей, указанная после 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>

и меньше стилей

@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;
  }
}

Ответ 1

Я просто нажал 1.0.31 - у него есть метод: less.refreshStyles(), который будет перекомпилировать теги <style> с помощью type="text/less" - попробуйте и дайте мне знать, если он работает.

Ответ 2

спасибо за задание этого вопроса - это очень помогло мне. Я просто обновляю тему, чтобы показать, как я сделал, чтобы динамически добавлять файл CSS.

Я использовал последнюю версию 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();

Ответ 3

Вы можете использовать эту легкую (3k) библиотеку для ленивых загрузок меньше /css и js файлов (отказ от ответственности: я автор).

Это так же просто, как:

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

Он также может получать обратный вызов, загружать еще несколько активов с зависимостями и заботиться о кеше.