Загружать less.js правила динамически - PullRequest
Новая
       22

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

25 голосов
/ 04 июля 2010

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

<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, если они не упорядочены правильно.Требование к порядку явно указано в этом руководстве .

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

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

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

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

Cheers,

Colin

UPDATE: код, используемый для проверки поведения, описанного в комментариях (меньше таблиц стилей, перечисленных после сценария) - 

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

Ответы [ 4 ]

29 голосов
/ 05 июля 2010

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

11 голосов
/ 09 января 2013

спасибо, что задали этот вопрос - он мне очень помог. Я просто обновляю тему, чтобы показать, как я сделал для динамического добавления файла 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();
2 голосов
/ 07 июля 2014

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

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

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

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

0 голосов
/ 17 октября 2018

Я нашел последнюю версию скрипта, которая отлично работает с файлом LESS: 

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

Вместо использования 

less.refreshStyles()

использование 

less.refresh()
...