Разбор .less файлов, загруженных асинхронно - PullRequest
0 голосов
/ 04 мая 2018

Я использую меньше для веб-приложения. В среде разработки у меня что-то типа

<head>
    <link rel="stylesheet/less" type="text/css" href="test.less"/>       
    <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.0.2/less.min.js" ></script>
</head>

это работает правильно: мой файл test.less загружается и автоматически конвертируется в действительный css меньше.

Теперь, если пользователь перейдет в определенный раздел сайта, мне нужно скачать еще один файл .less. Для этого я на лету создаю элемент, подобный этому:

<link rel="stylesheet/less" type="text/css" href="test2.less"/>

и добавьте его к голове.

Это НЕ работает - по крайней мере, в Chrome 66.0.3359.117 - потому что браузер вообще не запускает загрузку файла.

Я решил проблему, изменив атрибут ссылки 'rel':

<link rel="stylesheet" type="text/css" href="test2.less"/>

Таким образом, браузер правильно загружает файл test2.less; однако его содержимое не анализируется автоматически при помощи less, поэтому оно не преобразуется в действительное .css

Я думаю, что когда загружается less.js, он выполняет поиск всех элементов с атрибутом rel = "stylesheet / less" и их синтаксический анализ - стоп.

Но после этого он «прекращает» прослушивание других файлов .less, загружаемых асинхронно.

Есть ли способ "вызвать" меньше разбора?

Спасибо

1 Ответ

0 голосов
/ 04 мая 2018

Хорошо, пока я нашел решение.

Могу поспорить, есть более эффективные решения, но сейчас я продолжу в том же духе.

Я добавляю элемент

<link rel="stylesheet/less" type="text/css" href="test2.less"/>

в заголовке документа, и это не вызывает загрузку файла.

После этого я вызываю функцию

less.registerStylesheets().then(less.refresh);

Это заставляет меньше читать снова документ, запрашивать все документы и снова анализировать их все ... не эффективно, но это работает.

Интересно, существует ли метод, позволяющий потребителю меньше импортировать только один файл ...

Редактировать: небольшое улучшение:

вместо того, чтобы делать

less.registerStylesheets().then(less.refresh);

я могу сделать

less.sheets.push(link);
less.refresh();

ссылка - ссылка на созданную ссылку. Таким образом, меньше не будет снова читать весь документ, ища ссылки; вместо этого он просто подготовит XHR для новой созданной ссылки и проанализирует ее.

...