Cet article vous présente tout ce qu’il faut savoir afin d’utiliser le pré-processeur SASS pour vos projets web sur le logiciel Atom.
Installation de Node.js
Afin de pouvoir utiliser l’extension sass-autocompile, vous allez devoir au préalable installer Node.js sur votre machine. Pour cela, vous avez deux solutions à votre disposition :
- Utiliser l’installeur de Node.js ;
- Utiliser le gestionnaire de version nvm (méthode recommandée sur Mac).
Méthode 1 : Utiliser l’installeur de node.js
Node.js est une une plateforme logicielle libre pour JavaScript permettant l’utilisation du langage en dehors d’un navigateur.
Téléchargez le logiciel Node.js sur le site suivant https://nodejs.org/fr/download/
Lancez l’installeur et suivez les différentes étapes afin de procéder à l’installation du logiciel. Node.js va être installé avec le logiciel npm qui est le gestionnaire de paquets officiel de Node.js.
À la fin de l’installation, il vous est demandé de vous assurer que /usr/local/bin est bien dans la variable $PATH.
Si vous souhaitez vérifier que le dossier /usr/local/bin est bien dans la variable $PATH, veuillez suivre la procédure adaptée à votre système.
- Avec l’outil Rechercher, trouvez : Système (Panneau de configuration)
- Cliquez sur Paramètres système avancés dans le menu de gauche.
- Cliquez sur Variables d’environnement en bas de la fenêtre.
- Sélectionnez la variable
pathet cliquez sur Modifier…. - Le dossier
/usr/local/bindevrait être dans la liste qui s’affiche.
Ouvrez un terminal et tapez la commande echo $PATH. Le dossier /usr/local/bin devrait être dans la liste qui s’affiche.
Ouvrez un terminal et installez le paquet node-sass globalement :
npm install -g node-sass
Pour les utilisateurs de Os X vous devez ajouter sudo devant la commande pour éviter l’erreur concernant les droits utilisateurs.
Méthode 2 : Utiliser le gestionnaire de version nvm (recommandé sur OsX)
Nvm signifie Node Version Manager. Ce logiciel est utilisé afin de gérer facilement l’installation de plusieurs versions de Node.js sur le même ordinateur.
Ouvrez un terminal et installez le gestionnaire de version nvm en saisissant le code suivant dans un terminal. Rendez-vous sur la page du projet nvm afin de déterminer la dernière version de nvm (ici 0.35.0).
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.0/install.sh | bash
Relancez votre terminal.
Lancez la commande d’installation de Node.js suivante permettant d’installer la dernière version.
nvm install node
Si malgré le redémarrage de votre terminal, vous obtenez toujours le message d’erreur nvm : command not found.
Éditez le fichier le fichier ~/.bash_profile :
nano ~/.bash_profile
Et ajoutez la ligne suivante :
[[ -s $HOME/.nvm/nvm.sh ]] && . $HOME/.nvm/nvm.sh # This loads NVM
Installez le paquet node-sass globalement :
npm install -g node-sass
Installation du plugin de compilation Sass
Ouvrez le gestionnaire de package d’Atom et recherchez le package sass-autocompile pour l’installer.
Configuration du plugin
Configurer le plugin sass-autocompile avec les paramètres de votre choix. Voici un exemple de paramétrage conseillé :
Compile on save : cochez la case afin de lancer la compilation automatiquement dès que vous enregistrez les modifications d’un fichier.
Compile with compressed output style : cochez la case afin de générer des fichiers css compressés. Ce format est idéal pour l’utilisation en production.
Filename pattern for ‘compressed’ compiled files : saisissez le nom des fichiers de destination en fonction de l’arborescence de fichiers que vous souhaitez. La proposition ci-dessous permet, par exemple, d’ajouter un suffixe min aux noms des fichiers css et de les placer dans un dossier nommé css.
../css/$1.min.css
Build source map : cochez la case pour générer un fichier de source .map. Il s’agit d’un fichier grâce auquel le débogueur du navigateur peut faire le lien entre le code exécuté et les fichiers originaux.