Vous êtes sur la page 1sur 3

1

Utilisation de Sass

Préparer le dossier
1- Créer et importer un dossier dans VSC : 20210412 par exemple
2- Ouvrir le terminal et installer le terminal bash
3- Créer un sous dossier sass avec un fichier style.scss
4- Créer un sous dossier css
5- Vérifiez dans le terminal que node est installé ($node -v)
6- Vérifiez que npm est installé ($npm -v)

Créer votre fichier package.json


Utilisez le terminal et faites npm init :

Vous pouvez modifier les informations données dans le terminal :


Le dossier est créé : 2

Le fichier package.json permet de :


• Lister les paquets utilisés par votre projet qui sont appelés ses dépendances. En effet, sans
ces paquets, votre projet ne fonctionne pas, il est donc bien dépendant de celles-ci.
• Spécifier précisément quelles sont les versions des dépendances qui peuvent être installées.
• Permettre aux développeurs d'installer toutes les dépendances du projet en une
commande.

Installation de sass
Il suffit donc de faie :

npm install sass -g

Pour vérifier si sass est bien installé ($ sass –version)

Pour inscrire une dépendance sass dans le fichier package.json :

npm install sass --save

Le fichier package-lock.json
Lorsque l’on installe une dépendance avec npm i, un fichier package-lock.json est créé.
3
Pour s'assurer que l'arbre des dépendances (vos dépendances ont elles-mêmes des dépendances
résultant en un arbre immense de dépendances) installé soit le même entre deux npm i avec le même
package.json, npm crée un fichier package-lock.json (on y touche jamais) qui est une image figée de
l'arbre de toutes les dépendances (et des dépendances de vos dépendances etc), de votre projet.

Script sass
Dans le fichier package.json, il y a une entrée scripts.
Ces scripts peuvent être lancés en faisant npm run nom-du-script.
Nous allons créer notre premier script :

"scripts": {
"sass": "sass –watch ./sass/style.scss:./css/style.css"
}

NB : le chemin renseigné dans le script est l‘une des raisons principales du


dysfonctionnement de sass

Mise en fonction de sass


Nous pouvons lancer le script en faisant npm run sass.
Cette commande va créer deux fichiers : style.css et style.css.map
Si on exécute la commande dans le terminal, il reste bloqué. C'est tout à fait normal car il est en mode
watch : il attend que des fichiers soient modifiés dans le dossier sass pour les compiler à chaque fois.
Pour couper l'exécution, on fait Ctrl + c.

Création de dossiers et fichiers pour tester


Dans le dossier :
• On crée un fichier index.html

• Ensuite, dans le fichier style.scss nous allons écrire notre premier code Sass

• On peut ensuite lancer le script avec npm run sass puis sauvegarder le fichier.

Vous aimerez peut-être aussi