Менее компилятор Filewatcher в PHPStorm

что я делаю неправильно при попытке скомпилировать файлы .less в .css с помощью наблюдателя файлов PHPStorm?

Вот скриншот, (pls open ЭТА ССЫЛКА, чтобы увидеть полный размер изображения): enter image description here

Я установил npm install -g less после установки NodeJS. Он отлично работает с компилятором lessc при использовании cmd.exe - средства командной строки в ОС Windows с помощью этой команды:

lessc custom.less custom.css, но он не сделает ничего внутри PHPStorm в Filewatcher.

Любая подсказка, что я должен исправить, PLS?

Ответы

Ответ 1

Для тех, кто хочет настроить LESS auto compiler внутри своей IDE PHPStorm, вы можете сделать это следующим образом:

  • Загрузите и установите Node.js
  • Открыть терминал/Shell/Командная строка, cmd.exe для среды Windows
  • Внутри терминала командной строки введите npm install -g less и дождитесь загрузки и установки LESS.
  • В окне PHPStorm открыть окно настроек: Файл > Настройки (CTRL + ALT + S)
  • Перейдите к файловым наблюдателям (или найдите их в окне НАСТРОЙКИ)
  • Нажмите кнопку + в правой части диалогового окна "Настройки", чтобы создать новый наблюдатель файлов и настройте его, как показано на картинке:
    enter image description here
    Вот как выглядит ваша структура папок для настроек на предыдущем рисунке:
    enter image description here
  • Сохраните его и протестируйте его, каждый раз, когда вы вводите что-то внутри файла .less, он будет автоматически скомпилирован в .css, который вы определили ранее в диалоговом окне настроек Watcher.
    Чтобы отключить источник меньше файлов, создайте template.less, как показано на картинке, и подгрузите исходные файлы там, прежде чем делать что-то в стиле.


/*!
 * Your commented code which wouldn't be removed in compiled .css because of "!" mark
 */
 /*
  * This comment will be removed in compiled .css file because of no "!" after "/*"
  */

// Core source files of Twitter Bootstrap
@import "bootstrap/bootstrap";
@import "bootstrap/responsive";

// Core source file of Font Awesome Icons
@import "font-awesome/font-awesome";

// Connected plugins
@import "plugins/datepicker";
@import "plugins/redactor";

/*!
 * General template styles below
 */

/* -------------------------------------------------------------- */
/**** PRECONFIG, OVERRIDES, VARIABLES, TYPOGRAPHY ****/
/* -------------------------------------------------------------- */
// VARIABLES.LESS Override
//---------------------------------------------------------------
// Colors
@whiteSmoke:            #f5f5f5;

// Typo
@sansFontFamily:        "Helvetica Neue", Helvetica, Arial, sans-serif;
@serifFontFamily:       Georgia, "Times New Roman", Times, serif;
@monoFontFamily:        Monaco, Menlo, Consolas, "Courier New", monospace;