Sass filewatcher pour webstorm

Vous devez spécifier le chemin complet du nœud-sass.cmd dans le champ Programme /Comme déjà mentionné @LazyOne/

Ces arguments ne fonctionneront pas avec node-sass - Ils ne conviennent que pour le compilateur standard. SASS. Voici la liste des options node-sass:

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

[Options]

<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

Le paramètre le plus simple est comme suit:

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

Avec ces paramètres, le fichier généré .css Il sera placé à côté du fichier source. scss. Si vous souhaitez mettre les fichiers résultants dans un autre dossier, essayez de jouer avec le paramètre

-o

. Aimer:

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

Output paths to refresh: $ProjectFileDir$/css/$FileNameWithoutExtension$.css

</output.css></input.scss>

Assez défini comme moyen de .cmd Faux, comme suggéré Lena et paresseux. Chaque fois que l'observateur supprime une tique Web/Phpstorm, Ceci est probablement dû à un chemin inacceptable.
Si vous avez toujours des problèmes avec le nœud Sass, vous pouvez toujours aller ruby-m.

Télécharger et installer
http://rubyinstaller.org/
pour Win,

Installer Sass À travers la ligne de commande avec

gem install sass

,

DANS Web/Phpstorm Mettre "Program" le moyen de sass.bat /Tu te souviens du nœud Sass.cmd?/, par exemple

C:\Ruby200\bin\sass.bat

Tout d'abord, vous devez installer nodejs, puis utiliser npm install-g node-sass. Après cela, définissez les choses suivantes dans webstorm scss filewatcher:

Programme: node-sass.cmd

Arguments: $FileName$ $FileNameWithoutExtension$.css

Répertoire de travail: $FileDir$

Chemins de sortie pour les liens: $FileNameWithoutExtension$.css

Les réponses ici étaient très utiles et très proches de ce dont j'avais besoin. Je voulais que l'application crée des fichiers de carte et bundle eux S. css des dossiers. Voici les paramètres qui ont fonctionné pour moi. J'espère que cela aidera quelqu'un d'autre!

Afficher la console: [Erreur]

[x] Synchronisation immédiate des fichiers

[x] Suivre uniquement les fichiers racines

[ ] Trigger watcher Quelles que soient des erreurs syntaxiques

Type de fichier: Sass

Portée: fichiers de projet

Programme: /usr/local/bin/node-sass

Arguments: --source-map true --indented-syntax --output-style compressed $FileName$ $FileNameWithoutExtension$.css

Répertoire de travail: $FileDir$

Variables d'environnement:

Sorties pour la mise à jour: $FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map

[ ] Créer un fichier de sortie à partir de stdout

Phpstorm 8.0.3 Windows 7/x64/ nouer - sass Exemple de travail globalement installé

Un autre problème de clé du message source, en plus du point sur .cmd, Il remplace: avec une fonctionnalité oblique directe, le nœud ne comprend pas la syntaxe du côlon et s'attend à une barre oblique directe pour le champ d'argumentation. Trouvé une réponse par référence ci-dessous

http://www.wonderlandlabs.com/ ... storm
NOTE Dans l'exemple ci-dessus pour windows Vous devez spécifier le fichier cmd, c'est à dire " Chemin vers global npm packages/node-sass.cmd"

De plus, il a des commutateurs pour ruby sass, comme le --no-cache, qui ne fonctionnera pas avec le nœud, car Lena a souligné, passe des commutateurs node-sass doit fonctionner normalement, mais non testé

Voici une configuration de travail

Je sais que cette question a été répondue, c'est pour le futur visiteur,

Phpstorm file watcher ne fonctionne pas très bien avec

node-sass

/Vérifié B. Phpstorm 8.0.1 windows/

Au lieu de cela, définissez

node-sass-cli

et utilisez le paramètre suivant

Les nœuds ne nécessitent rien de plus que

$FileName$ $FileNameWithoutExtension$.css

Testé et fonctionne dans WebStorm 11

Cependant, le paramètre de programme est nécessaire à plein autre moyen de bin/exe, Même s'il est disponible à l'échelle mondiale. Dans mon cas

/usr/local/bin/node-sass

, Dans votre cas, ce sera le moyen de

node-sass.cmd

.

https://i.stack.imgur.com/aQLfW.png
Utiliser le nœud sass Ligne de commande

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

nouer sass Paramètres d'équipe

cordes

-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

J'ai le même problème.

Configuration par défaut IntelliJ ne marche pas

.

Cela a déjà travaillé. Vous pouvez voir une configuration différente marquée de jaune.
https://i.stack.imgur.com/oRuun.png

J'ai installé

node-sass

de l'autre côté npm /npm Installez le nœud Sass/ décodage effectivement

scss

avant que

css

. Le seul problème avec la configuration, comme dans la question, était

Lieu

Déposer

node-sass.cmd

. Lors de l'installation via npm Vous devez installer le fichier

.cmd

Dans le dossier

node_modules\.bin

.

Dans mon cas, de l'endroit où le fichier node-sass Était /

node_modules\node-sass\bin\node-sass

/ avant que /

node_modules\.bin\node-sass.cmd

/.

De plus, selon la réponse de Lena, l'argument de sortie devrait être:

Arguments:

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

PHP Version de tempête 2018.02

Je ne pouvais pas forcer filewatcher Générer un fichier

css.map

Avec un message Günay,
tout rest Les messages fonctionnent bien pour moi, alors j'utilise:

Installation

Ensemble

node-sass

global:

npm install -g node-sass

Réglages

:

Programme

C:\Users\User\AppData\Roaming\npm\node-sass.cmd

Arguments

--source-map true $FileName$ $FileNameWithoutExtension$.css

Façon de sortie de mettre à jour

$FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map

Catalogue de travail

$FileDir$

J'espère que cela aidera