Ce guide illustrera la procédure complète pour mettre en place un projet rapide Node.js SASS/SCSS.
Comment configurer un projet Fast Node.js Sass/SCSS ?
SASS utilise des propriétés CSS pures pour effectuer un style sur l'élément sélectionné. Il renforce le CSS d'origine en incluant les fonctionnalités mathématiques et variables. Il applique un style sur le DOM dans une hiérarchie. En intégrant SASS à Node.js, le développeur peut styliser le projet très facilement pour le rendre plus accrocheur et au pixel près.
Suivons les étapes ci-dessous pour configurer un projet Node.js avec SASS/SCSS.
Étape 1 : Installation de « SASS »
Tout d’abord, installez « TOUPET ' globalement dans le projet Node.js en utilisant le gestionnaire de packages de nœuds ' npm » via cette commande :
npm installer -g sass
Le résultat montre que « saas ' Le package a été installé :
Étape 2 : Créer des répertoires
Ensuite, créez des répertoires séparés pour les fichiers CSS et SCSS à l'aide de la commande « mkdir » suivante :
mkdir Fichiers CSS
mkdir scssFichiers
On peut voir que ce qui précède « mkdir ' La commande a créé le ' Fichiers CSS ' et ' Fichiers scss » annuaires :
Étape 3 : Lier le module SASS
Maintenant, utilisez le ' toupet ' Module pour surveiller toute modification dans les fichiers résidants du ' Fichiers scss » répertoire. En cas de modification, il créera automatiquement des fichiers CSS à l'intérieur du lien ' Fichiers CSS » et insérez les mêmes données scss dans le fichier CSS.
La commande à exécuter pour regarder et lier le « toupet ' Le module est le suivant :
toupet --montre Fichiers scss : Fichiers CSSDésormais, saas surveille toutes sortes de modifications dans le répertoire scssFiles.
Note: La commande ci-dessus doit être exécutée sur l'invite de commande du système car elle ne fonctionnera pas sur les terminaux d'outils comme le code Visual Studio.
Étape 4 : Création de SCSS et des fichiers CSS correspondants
Dans cette étape, un fichier vide nommé « scssStyle ' avec ' scss ' L'extension est créée à l'intérieur du ' Fichiers scss » répertoire :
Après cela, deux fichiers portant le nom « scssStyle.css ' et ' scssStyle.css.map ' sont créés automatiquement par le ' toupet ' module à l'intérieur du ' Fichiers CSS ', comme indiqué ci-dessous :
Étape 5 : Insérer le code
Enfin, entrez un code SCSS dans le champ « scssStyle.scss ' comme indiqué ci-dessous:
Désormais, le même code au format CSS est automatiquement inséré dans le « scssStyle.css ' déposer:
Illustrons visuellement les étapes 4 et 5 à l'aide d'un gif :
Ce guide a expliqué les étapes de création du projet Node.js SASS\SCSS.
Conclusion
Pour mettre en place un projet Node.js SASS/SCSS rapide, installez d'abord le module « toupet ', puis créez deux répertoires, un pour ' SASS\SCSS ' fichier et un autre pour ' CSS ' des dossiers. Après cela, faites le ' toupet » module pour surveiller toute modification dans les répertoires nouvellement créés via le « sass – regarder sass:css ' commande. À la suite de cette action, le fichier « SASS\SCSS » et deux fichiers « CSS » sont automatiquement générés dans le dossier « CSS ». Si l'utilisateur modifie les fichiers « SASS\SCSS », alors les nouvelles modifications seront automatiquement insérées dans les fichiers CSS. Ce guide a expliqué la procédure complète de configuration du projet Node.js SASS\SCSS.