Как правильно работать с LESS?

Question

[nepster-web]

Проблема возникла следующая. Мне необходимо использовать компоненты bootstrap, там по себе целиком это свалка, а вот отдельные компоненты очень даже хорошая штука.

Я зашел в гости к разработчикам: https://github.com/twbs/bootstrap скачал это все дело и меня интересует следующее:
- dropdown.js
- modal.js
- popover.js
- tab.js
- tooltip.js

Естественно к этим плагинам нужны стили, их можно взять тут: https://github.com/twbs/bootstrap/tree/master/less
Для компиляции LESS в CSS я использую плагин в phpStorm.

И возникает следующая проблема:
Каждый LESS файл использует переменные: https://github.com/twbs/bootstrap/blob/master/less..., поэтому при редактировании кода я не могу редактировать 1 файл и сразу смотреть на изменения в браузере, так как возникает ошибка (к примеру переменная @modal-content-bg не найдена).

Как вариант создать свой файл настроек и импортировать в каждый LESS файл плагина или постоянно собирать все это дело через grunt, что достаточно не удобно.

Подскажите пожалуйста как это дело правильно готовить?

Answer 1

[Денис Малиночкин]

Лучший вариант - Grunt (Gulp), Prepros и т.д. Достаточно не

постоянно собирать

, а настроить плагин grunt-contrib-watch, который собирает ваши less-файлы при их изменении. Не уверен, но скорее всего PHPStorm умеет это делать, так как в WebStorm есть настройки вотчеров.

Полезной идеей будет создать отдельный файл, например styles.less, где будут импортироваться все необходимые less-файлы, при изменении которых будет компилироваться именно он.