Parlons des problèmes de compilation Webstorm Sass

Cet article est écrit par la colonne tutoriel d'utilisation de webstorm pour présenter les problèmes de compilation sass sous webstorm. Il a une certaine valeur de référence et j'espère qu'il pourra aider tout le monde.

Problème de compilation Sass sous webstorm

saas doit s'exécuter dans un environnement Ruby, donc Ruby ​​32/64 doit être installé

1 Installez Ruby

2 Dans la commande DOS, testez si Ruby ​. ​est installé : ruby ​​​​-v (retournez Car, si le numéro de version apparaît, l'installation de ruby ​​​​est réussie)

3. Commande d'installation de sass : gem install sass

4. Testez si sass est installé avec succès : sass. -v (Appuyez sur Entrée, si le numéro de version apparaît, l'installation de sass est réussie)

Méthode 1 : conversion sass de la commande DOS en surveillance de fichiers CSS

1. Dans le répertoire de fichiers, ouvrez la méthode de ligne de commande dos :shift + clic droit

2. Entrez la commande sass dans la ligne de commande pour compiler le fichier sass Surveiller et compiler les fichiers css

sass style.scss mystyle.css
sass style.scss ../css/mystyle.css

 : Lorsque sass est modifié, le fichier css sera modifié simultanément

sass --watch style.scss:../css/mystyle.css

3. Quitter la surveillance ctrl + c, sélectionnez y

Méthode 2 : webstorm est livré avec une surveillance intégrée

1 Une fois pour toutes : configuration Environnement IDE :

Configuration IDE (emplacement : paramètre --> Outils --> Fichier. watchers)

Si sass et css sont deux dossiers pour stocker respectivement scss et css :

Arguments：--style expanded --no-cache --update $FileName$:../css/$FileNameWithoutExtension$.css

Erreur de compilation chinoise : [Ne peut être utilisé aucun nom de fichier et remarques avec des caractères chinois] Recherchez le fichier

1 Ligne 87 de librubygems2. 3.0gemssass-3.4.22libsassimportersfilesystem.rb

if name.index(@root + "/") == 0 修改为 if name.encode("utf-8",'gbk').index(@root + "/") == 0

2. Ajoutez la phrase suivante @charset "UTF" en tête du fichier .scss -8”

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!