Меньше компилятора Filewatcher в PhpStorm

Question

Меньше компилятора Filewatcher в PhpStorm

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

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

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

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

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

12

phpstorm less

Author: aspirinemaga, 2013-07-07

Source

1 answers

score 38 · Accepted Answer

Для тех, кто хочет настроить меньше автокомпилятора внутри своей среды разработки PhpStorm, вы можете сделать это следующим образом:

Загрузите и установите Node.js
Откройте терминал/оболочку/командную строку, cmd.exe для среды Windows
Внутри командной строки терминала введите npm install -g less и подождите, пока будет загружено и установлено МЕНЬШЕ.
В PhpStorm откройте окно настроек: Файл> Настройки (CTRL+ALT+S)
Перейдите к файлу Наблюдатели (или найдите его в окне НАСТРОЕК)
Нажмите на + в правой части диалогового окна настроек создайте новый наблюдатель за файлами и настройте его, как показано на рисунке:

И вот как должна выглядеть ваша структура папок для настроек на предыдущем рисунке:
Сохраните его и протестируйте, каждый раз, когда вы вводите что-то внутри файла .less, оно будет автоматически скомпилировано в .css, который вы определили ранее в Наблюдателе за файлами диалоговое окно настройки.
Чтобы отключить исходные файлы, создайте 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's 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;