Компиляция LESS в CSS на лету в phpStorm под Windows | Predvoditelev.ru



Компиляция LESS в CSS на лету в phpStorm под Windows

Пошаговая инструкция по настройке компиляции LESS в CSS на лету в среде разработки phpStorm в ОС Windows.

Для того, чтобы настроить в phpStorm компиляцию LESS в CSS, нужно сначала установить сам компилятор LESS. Как подсказывает нам официальный сайт LESS, проще всего это сделать с помощью npm (пакетного менеджера Node.js). Так мы и поступим.

При написании статьи использовались следующие версии ПО:

  • phpStrom 7.1
  • Windows 7 64 bit

Установка NODE.JS

Скачиваем последнюю версию дистрибутива с сайта http://nodejs.org/. Как правило, сайт сам определяет какой дистрибутив подходит для вашей системы. Остаётся только нажать INSTALL.

После скачивания запускаем установщик и next, next, next… Со всем соглашаемся.

Установка компилятора LESS

Запускаем Node.js command prompt (ярлык должен появиться в меню «Пуск»):

В командной строке вбиваем:

npm install -g less

… и жмём Enter. Ждём пока установиться компилятор LESS и закрываем окно:

Перезагружаем компьютер.

Настройка phpStorm

В настройках phpStorm включаем плагин «LESS support»:

Теперь при открытии в phpStorm файла *.less сверху редактора должна появится зелёная плашка с уведомлением о том, что для данного файла доступен file watcher «LESS»:

Выбираем ссылку «Add watcher». Готово! Теперь при сохранении файла *.less будет автоматически создаваться файл *.css в той же папке с тем же именем.

Убираем автоматическое открытие консоли при ошибке в LESS

По-умолчанию, при редактировании файла *.less в phpStorm в случае ошибки компиляции автоматически открывается консоль с ошибкой. Чтобы от этого избавиться, нужно зайти в настройки, выбрать пункт File Watchers, далее выбрать LESS и нажать на иконку «редактировать», в открывшемся окне ищем элемент «show console» и выбираем пункт «never»:


http://predvoditelev.ru/less_to_css_in_phpstorm_win/

Губарь Маргарита Александровна