🎥 Configurer la Compilation SCSS dans WebStorm et PhpStorm (JetBrains) 🛠

Série : Introduction à Scss

Introduction

Bienvenue dans ce tutoriel consacré à la configuration de SCSS dans les outils JetBrains, notamment WebStorm et PhpStorm. Aujourd'hui, nous allons voir comment installer et configurer le compilateur SCSS directement dans ces environnements de développement.

Prérequis

Avant de commencer, assurez-vous d'avoir Node.js et npm installés sur votre machine. Vous pouvez vérifier cela en ouvrant un terminal et en exécutant les commandes suivantes :

node -v

npm -v

Si vous n'avez pas Node.js et npm, rendez-vous sur nodejs.org pour les télécharger et les installer.

Installation de SCSS

Pour installer SCSS globalement sur votre machine, exécutez la commande suivante dans votre terminal :

npm install -g sass

Cette commande installe SCSS globalement, ce qui vous permettra de l'utiliser directement dans WebStorm ou PhpStorm.

Configuration dans WebStorm

Création d'un Nouveau Dossier et Fichier SCSS

1. Ouvrez WebStorm.
2. Créez un nouveau dossier, par exemple scss.
3. Dans ce dossier, créez un nouveau fichier nommé styles.scss.

Configuration du File Watcher

1. Lorsque vous créez un fichier SCSS, WebStorm vous informe que vous avez besoin d'un File Watcher. Cliquez sur "Yes" pour configurer automatiquement un File Watcher pour SCSS.
2. Vous pouvez également configurer manuellement un File Watcher en allant dans Settings (ou Preferences sur macOS) > Tools > File Watchers et en cliquant sur le bouton + pour ajouter un nouveau File Watcher.
3. Sélectionnez SCSS dans la liste des File Watchers disponibles.
4. Laissez les paramètres par défaut et cliquez sur OK.

Test de la Configuration

1. Ajoutez du code SCSS dans votre fichier styles.scss, par exemple :

h1 {

     color: red;

}

1. Vous devriez voir que le File Watcher s'active et génère un fichier styles.css dans le même dossier.

Personnalisation de la Sortie

Si vous préférez que les fichiers CSS générés soient dans un dossier séparé, suivez ces étapes.

Supprimez les fichiers générés (styles.css et styles.css.map).

Modifiez les arguments du File Watcher pour spécifier un dossier de sortie :

• Allez dans Settings > Tools > File Watchers.
• Sélectionnez votre File Watcher SCSS et cliquez sur Edit.
• Dans le champ Arguments, ajoutez $FileParentDir$/css/ entre $FileName$ et $FileNameWithoutExtension$, ce qui donnera $FileName$:$FileParentDir$/css/$FileNameWithoutExtension$.css

Cliquez sur OK pour enregistrer les modifications.

Génération de Fichiers Minifiés

Pour générer des fichiers CSS minifiés, suivez ces étapes :

1. Dupliquez le File Watcher SCSS existant.
2. Modifiez les arguments pour inclure le flag --style compressed et spécifiez le nom de fichier de sortie comme .min.css pour obtenir ces arguments $FileName$:$FileParentDir$/css/$FileNameWithoutExtension$.min.css --style=compressed

Conclusion

En suivant ces étapes, vous avez configuré WebStorm pour compiler automatiquement vos fichiers SCSS en CSS et CSS minifiés. Vous pouvez maintenant utiliser ces File Watchers dans tous vos projets pour simplifier votre flux de travail de développement front-end.

Obtenir de l'aide

Pour obtenir de l'aide, vous pouvez accéder au serveur Discord pour une entraide par chat.