Sass Filewatcher dla webstorm

Question

Próbuję użyć Sass w projekcie NodeJS i to jest biblioteka zainstalowałem z nodejs

https://www.npmjs.org/package/node-sass

używam webstorm dla tego projektu i nie mogę uzyskać Sass file watcher do pracy.

Nawet po tym, jak zapisać Filewatcher i kliknij "OK", Filewatcher nie działa. Kiedy otwieram ustawienia, aby sprawdzić, co jest nie tak, odznaczenie pliku dziennika zostało usunięte. Oto ustawienia Filewatcher:

Moduł node-Sass jest zainstalowany jako moduł globalnego tak pracach dowodzenia węzłów Sass.

Answer 1

Zdecydowanie droga do .cmd jest błędna, tak jak sugerowała to lena i leniwy. Zawsze, gdy obserwator odznacza w Web/Phpstorm, prawdopodobnie z powodu nieprawidłowej ścieżki. Jeśli nadal masz problemy z węzłem sass, zawsze możesz przejść na Ruby.

1. Pobierz i zainstaluj Ruby dla Win,
2. Install Sass pośrednictwem wiersza poleceń z gem install sass,
3. W Web/Phpstorm umieścić "Program" ścieżkę do sass.bat (pamiętaj Node-sass.cmd?), na przykład C:\Ruby200\bin\sass.bat

Answer 2

1. Trzeba podać pełną ścieżkę do węzła-sass.cmd w zakresie Programu (jak wspomniano @LazyOne)
2. Określone argumenty nie będzie działać z węzła-Sass - nadają się tylko do standardowych SASS kompilator. Tutaj znajduje się lista opcji node-Sass:

Usage: node C:\Users\USER\AppData\Roaming\npm\node_modules\node-sass\bin\node-sass 

[opcje] <input.scss> [<output.css>]

Options: 
    --output-style  CSS output style (nested|expanded|compact|compressed) [default: "nested"] 
    --source-comments Include debug info in output (none|normal|map)   [default: "none"] 
    --include-path  Path to look for @import-ed files      [default: "C:\\Users\\USER\\AppData\\Roaming\\npm"] 
    --watch, -w  Watch a directory or file 
    --output, -o  Output css file 
    --stdout   Print the resulting CSS to stdout 
    --help, --help  Print usage info 

najprostsza konfiguracja wygląda następująco:

Program: C:\Users\USER\AppData\Roaming\npm\node-sass.cmd 
Arguments: $FileName$ $FileNameWithoutExtension$.css 
Working directory: $FileDir$ 
Output paths to refresh: $FileNameWithoutExtension$.css 

'Create output from stdout' should be off 

W Dzięki takim ustawieniom wygenerowany plik .css zostanie umieszczony w pobliżu oryginalnego pliku .scs. Jeśli chcesz umieścić pliki wynikowe w innym folderze, spróbuj grać z opcją -o. Podobnie jak:

Arguments: $FileName$ -o $ProjectFileDir$/css/$FileNameWithoutExtension$.css 
Output paths to refresh: $ProjectFileDir$/css/$FileNameWithoutExtension$.css 

Answer 3

Wiem, że to pytanie zostało odebrane, to dla przyszłego użytkownika,

plik Phpstorm obserwator nie działa bardzo dobrze z node-sass (testowane w Phpstorm 8.0.1 Windows)

Zamiast instalować node-sass-cli i stosowanie następujących ustawień

Answer 4

Phpstorm 8.0.3 Windows 7 (x64) Node-Sass zainstalowanego globalnie działający przykład

Innym kluczowym problemem z oryginalnego postu poza tym, że .cmd zastępuje: z ukośnikiem w przód, węzeł nie rozumie składni dwukropka i oczekuje zamiast tego pola ukośników zamiast ukośnika. Znaleziono odpowiedź z poniższego linku

http://www.wonderlandlabs.com/blog/scss_in_webstorm

Uwaga: W powyższym przykładzie do okien trzeba wskazać plik cmd czyli „Ścieżka do globalnych pakietów NPM/node-sass.cmd”

także ma przełączniki dla ruby ​​Sass takie jak --no-cache, które nie będą pracować z węzła jako Lena podkreślił, przełączniki node-Sass powinien działać dobrze, ale nie testowane

Oto config roboczego

Answer 5

node-Sass wymaga niczego więcej niż $FileName$ $FileNameWithoutExtension$.cssprzetestowany i działa w WebStorm 11

Parametr program potrzebuje pełną ścieżkę do bin/exe choć nawet wtedy, gdy jest ona dostępna na całym świecie. W moim przypadku /usr/local/bin/node-sass, w twoim przypadku będzie to ścieżka do node-sass.cmd.

węzeł Sass CLI Wykorzystanie

node-sass [options] <input> [output] cat <input> | node-sass > output 

węzeł Sass CLI parametry

-w, --watch    Watch a directory or file 
-r, --recursive   Recursively watch directories or files 
-o, --output    Output directory 
-x, --omit-source-map-url Omit source map URL comment from output 
-i, --indented-syntax  Treat data from stdin as sass code (versus scss) 
-q, --quiet    Suppress log output except on error 
-v, --version    Prints version info 
--output-style    CSS output style (nested | expanded | compact | compressed) 
--indent-type    Indent type for output CSS (space | tab) 
--indent-width    Indent width; number of spaces or tabs (maximum value: 10) 
--linefeed     Linefeed style (cr | crlf | lf | lfcr) 
--source-comments   Include debug info in output 
--source-map    Emit source map 
--source-map-contents  Embed include contents in map 
--source-map-embed   Embed sourceMappingUrl as data URI 
--source-map-root   Base path, will be emitted in source-map as is 
--include-path    Path to look for imported files 
--follow     Follow symlinked directories 
--precision    The amount of precision allowed in decimal numbers 
--importer     Path to .js file containing custom importer 
--functions    Path to .js file containing custom functions 
--help      Print usage info 

Answer 6

najpierw trzeba zainstalować nodejs a następnie użyć npm zainstalować -g Node-Sass . Po tym zestawie następujące rzeczy webstorm SCSS Filewatcher:

• Program: node-sass.cmd
• Argumenty: $ FileName $ $ FileNameWithoutExtension $ .css
• katalog roboczy: $ FileDir $
• ścieżki wyjścia do literatury: FileNameWithoutExtension $ $ .css

Answer 7

zainstalowałem node-sass przez KMP (npm zainstalować node-Sass) faktycznie transkryptu scss do css. Jedynym problemem z konfiguracją, tak jak w pytaniu, była lokalizacja pliku . Podczas instalacji przez npm, należy zainstalować plik .cmd w folderze node_modules\.bin.

W moim przypadku, z którego pochodzi plik węzła-sass (node_modules\node-sass\bin\node-sass) do (node_modules\.bin\node-sass.cmd).

Ponadto, zgodnie z odpowiedzią Leny, argument wyjście powinno być:

Argumenty: $FileName$ -o $ProjectFileDir$/css/$FileNameWithoutExtension$.css

Answer 8

Tutejsze odpowiedzi były bardzo pomocne i bardzo blisko tego, co potrzebne. Chciałem, aby aplikacja tworzyła pliki map i pakowała je do plików css. Oto ustawienia, które zadziałały dla mnie. Mam nadzieję, że to pomoże komuś innemu!

• Pokaż konsoli: [Błąd]
• [x] synchronizacja Natychmiastowe plik
• tylko pliki [x] Śledzenie korzeniowe
• [] Obserwator Wyzwalanie niezależnie od błędów składniowych
• Typ pliku: Sass
• Zakres: pliki projektu
• Program:/usr/local/bin/node-Sass
• Argumenty: --source-map prawda --indented składni --output stylu sprężonego $ FileName $ $ FileNameWithoutExtension $ .css
• katalog roboczy: $ FileDir $
• Zmienne środowiskowe:
• ścieżki wyjścia do odświeżenia: $ FileNameWithoutExtension $ .css: $ FileNameWithoutExtension $ .css.map
• [] Tworzenie pliku wyjściowego z stdout