Как подключить Less к Drupal.

image

24.08.14
Comments 1

Недавно начал использовать CSS препроцессор Less. Оказывается очень удобная штука, хотя я и не пользуюсь всеми его фишками, если вы не знаете что это такое, подробнее почитать о нем можете тут. В этой статье я расскажу о нескольких способах, как подключить  Less к Drupal.

1. Первый способ это использование PHP компилятора, плюсы этого метода в том, что он не замедляет загрузку страницы и будет работать даже в том случае, если у пользователя отключен Javascript. Для Drupal есть специальный модуль, который так и называется Less, о том, как его настроить можете почитать здесь. Не знаю почему, но использование данного модуля периодически ломало сайт, появлялись ошибки, провозившись с поиском проблем достаточно долгое время, я решил отказаться от его использования.

2. Следующий способ это компиляция LESS в CSS на лету в IDE phpStorm с использование Node.js, звучит угрожающе, но ничего сложного в настройке нет, как настроить PHPStorm для работы с Less, можете почитать тут. Все что вам потребуется для того чтобы подцепить  все это дело к Друпал, это подключить скомпилированный css в info файл вашей темы.

3. Ну и последний способ, которым я пользуюсь в процессе разработки это компиляция на стороне клиента с использованием JavaScript компилятора Less.js. Все что вам нужно сделать, это скачать данную библиотеку, подключить ее в info файл вашей темы, подключить less файл в шаблон html.tpl.php и там же добавить код для включения watch mode (компиляция на лету, без обновления страницы браузера),  может это неправильно решение, для подключения скрипта, но только так мне удалось заставить работать watch mode. Так же следует зайти в настройки производительности и включить сжатие CSS. Ниже я приведу пример блока head из htmp.tpl.php файла.

<head profile="<?php print $grddl_profile; ?>">
    <?php print $head; ?>
    <title><?php print $head_title; ?></title>
    <?php print $styles; ?>
    <link rel="stylesheet/less" href="/sites/all/themes/mytheme/less/style.less">
    <script type="text/javascript">
        less = {};
        less.env = 'development';
    </script>
    <?php print $scripts; ?>

    <script type="text/javascript">
        less.watch();
    </script>
</head>

Комментарии

Алексей 24.09.15

4-й способ :)
опробовал практически - он самй самый.
Берем less.php компилятор и встраиваем в рабочую тему. При любых изменениях в лессе компилируется на сервере новый цсс и выводится в хедере тпл.

Комментировать