Kompilator Less Filewatcher w PHPStorm

Question

Kompilator Less Filewatcher w PHPStorm

Co robię źle, próbując skompilować .less pliki do .css za pomocą PhpStorm File watcher ?

Oto zrzut ekranu, (pls otwórz ten LINK , aby zobaczyć pełny rozmiar obrazu): Tutaj wpisz opis obrazka

Zainstalowałem npm install -g less, Po zainstalowaniu NodeJS. To działa dobrze kompilator lessc przy użyciu cmd.exe - Narzędzie wiersza poleceń w systemie operacyjnym Windows z tym poleceniem:

lessc custom.less custom.css, ale nie zrobi nic wewnątrz PHPStorm w Filewatcher.

Any clue what I powinien poprawić, pls ?

12

phpstorm less

Author: aspirinemaga, 2013-07-07

Source

1 answers

score 38 · Accepted Answer

Dla tych, którzy chcą skonfigurować mniej automatycznego kompilatora w swoim IDE PHPStorm, możesz to zrobić w ten sposób:

Pobierz i zainstaluj węzeł.js
Open Terminal/Shell / Command line, cmd.exe dla środowiska Windows
wewnątrz linii poleceń terminal, wpisz npm install -g less i poczekaj na pobranie i zainstalowanie mniej.
w PHPStorm Otwórz okno ustawień: Plik > Ustawienia (CTRL+ALT+S)
przejdź do obserwatorzy plików (lub wyszukaj go w oknie ustawień)
Kliknij + po prawej stronie okna dialogowego Ustawienia, aby utworzyć nowy Kontroler plików i skonfigurować go tak, jak pokazano na obrazku:

I tak powinna wyglądać struktura folderów dla ustawień na poprzednim zdjęciu:
zapisz go i Przetestuj, za każdym razem, gdy wpiszesz coś wewnątrz pliku .less, zostanie to automatycznie skompilowane do .css zdefiniowanego wcześniej w ustawieniu File Watcher dialog.
Aby usunąć pliki źródłowe, Utwórz template.less Jak pokazano na obrazku i załaduj tam pliki źródłowe przed przystąpieniem do stylizacji czegokolwiek.

/*!
 * 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;