Aller au contenu principal

Module SCSS.6 – Compilation & tooling

Objectif​

Maîtriser la compilation SCSS : outils de compilation, source maps, environnements de développement pour compiler efficacement le SCSS.

Théorie​

Compilation SCSS​

Processus :

SCSS (source) → Compilateur → CSS (navigateur)

Outils de compilation :

  • Dart Sass : Officiel, moderne (recommandé)
  • Node-sass : Ancien (déprécié)
  • LibSass : C++ (déprécié)

Installation​

Dart Sass (recommandé) :

# Installation globale
npm install -g sass

# Ou local dans le projet
npm install --save-dev sass

Vérification :

sass --version

Compilation de base​

Commande simple :

sass input.scss output.css

Watch mode (auto-compilation) :

sass --watch input.scss:output.css

Dossier complet :

sass --watch scss:css

Options :

sass input.scss output.css --style expanded    # Format lisible
sass input.scss output.css --style compressed  # Minifié
sass input.scss output.css --style compact     # Compact
sass input.scss output.css --no-source-map     # Sans source map

Styles de compilation​

Expanded (défaut) :

.button {
    padding: 10px 20px;
    background-color: blue;
}

Compressed (production) :

.button{padding:10px 20px;background-color:blue}

Compact :

.button { padding: 10px 20px; background-color: blue; }

Source Maps​

Source maps = Fichiers qui lient le CSS compilé au SCSS source.

Activation :

sass scss:css --source-map

Avantages :

  • ✅ Débogage dans DevTools
  • ✅ Voir le SCSS source, pas le CSS compilé
  • ✅ Breakpoints dans SCSS

Fichiers générés :

css/
├── style.css
└── style.css.map (source map)

HTML :

<link rel="stylesheet" href="css/style.css">
<!-- Source map détecté automatiquement -->

Environnements​

Développement​

Configuration :

sass --watch scss:css --style expanded --source-map

Caractéristiques :

  • Format expanded (lisible)
  • Source maps activés
  • Watch mode
  • Pas de minification

Production​

Configuration :

sass scss:css --style compressed --no-source-map

Caractéristiques :

  • Format compressed (minifié)
  • Pas de source maps
  • Optimisé pour performance

Intégration avec build tools​

Webpack​

Installation :

npm install --save-dev sass-loader sass webpack

Configuration :

// webpack.config.js
module.exports = {
    module: {
        rules: [
            {
                test: /\.scss$/,
                use: ['style-loader', 'css-loader', 'sass-loader']
            }
        ]
    }
};

Vite​

Installation :

npm install --save-dev sass

Utilisation :

// style.scss
// Importé directement dans JS/TS

Configuration automatique : Vite gère SCSS nativement.

Gulp​

Installation :

npm install --save-dev gulp gulp-sass sass

Configuration :

// gulpfile.js
const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass'));

gulp.task('sass', function() {
    return gulp.src('scss/**/*.scss')
        .pipe(sass({ outputStyle: 'compressed' }).on('error', sass.logError))
        .pipe(gulp.dest('css'));
});

gulp.task('watch', function() {
    gulp.watch('scss/**/*.scss', gulp.series('sass'));
});

Parcel​

Installation :

npm install --save-dev parcel sass

Utilisation :

<link rel="stylesheet" href="scss/main.scss">

Configuration automatique : Parcel gère SCSS nativement.

npm scripts​

package.json :

{
    "scripts": {
        "sass": "sass scss:css",
        "sass:watch": "sass --watch scss:css",
        "sass:build": "sass scss:css --style compressed --no-source-map"
    }
}

Utilisation :

npm run sass          # Compilation unique
npm run sass:watch    # Watch mode
npm run sass:build    # Build production

VS Code extensions​

Extensions recommandées :

  • Live Sass Compiler : Compilation automatique
  • Sass : Syntax highlighting
  • SCSS IntelliSense : Autocomplétion

Configuration Live Sass Compiler :

// settings.json
{
    "liveSassCompile.settings.formats": [
        {
            "format": "expanded",
            "extensionName": ".css",
            "savePath": "/css",
            "sourceMap": true
        }
    ],
    "liveSassCompile.settings.excludeList": [
        "**/node_modules/**",
        "**/vendors/**"
    ]
}

Gestion des erreurs​

Erreurs de compilation :

Error: Invalid CSS after "...": expected selector

Solutions :

  • Vérifier la syntaxe SCSS
  • Vérifier les imports
  • Vérifier les variables/mixins

Mode verbose :

sass scss:css --verbose

Exercices guidés​

Exercice 1 : Installation et première compilation​

Installez Sass :

  • Installation Dart Sass
  • Compilez un fichier SCSS simple
  • Vérifiez le CSS généré

Exercice 2 : Watch mode​

Utilisez le watch mode :

  • sass --watch scss:css
  • Modifiez le SCSS
  • Observez la compilation automatique

Exercice 3 : Styles de compilation​

Testez les différents styles :

  • Expanded
  • Compressed
  • Compact
  • Comparez les résultats

Exercice 4 : Source maps​

Activez les source maps :

  • Compilez avec --source-map
  • Ouvrez DevTools
  • Inspectez le CSS (voir le SCSS source)

Exercice 5 : npm scripts​

Créez des scripts npm :

  • Script pour développement
  • Script pour production
  • Utilisez-les

❌ Erreurs fréquentes​

Erreur 1 : Oublier de compiler​

❌ Mauvais :

  • Modifier SCSS
  • Oublier de compiler
  • Se demander pourquoi ça ne marche pas

✅ Bon :

  • Utiliser watch mode
  • Ou compiler après modification

Pourquoi : SCSS doit être compilé.

Erreur 2 : Source maps en production​

❌ Mauvais :

sass scss:css --style compressed --source-map

✅ Bon :

sass scss:css --style compressed --no-source-map

Pourquoi : Source maps = fichiers supplémentaires, pas besoin en production.

Erreur 3 : Format expanded en production​

❌ Mauvais :

sass scss:css --style expanded

✅ Bon :

sass scss:css --style compressed

Pourquoi : Compressed = plus petit, meilleure performance.

Erreur 4 : Pas de watch mode en développement​

❌ Mauvais :

  • Compiler manuellement à chaque modification

✅ Bon :

  • Utiliser --watch ou build tool

Pourquoi : Watch mode = productivité.

Erreur 5 : Imports incorrects​

❌ Mauvais :

@import '_variables.scss'; // Avec _ et .scss

✅ Bon :

@import 'variables'; // Sans _ ni .scss

Pourquoi : SCSS résout automatiquement.

🚀 Mini-projet​

Mission : Configurer un workflow SCSS complet

Créez un projet avec :

Configuration :

  • Structure SCSS organisée
  • npm scripts (dev, build)
  • Watch mode pour développement
  • Compilation minifiée pour production

Environnements :

  • Développement : expanded + source maps
  • Production : compressed + no source maps

Intégration :

  • VS Code avec extensions
  • Ou build tool (Vite, Webpack)

Critères :

  • ✅ Compilation fonctionnelle
  • ✅ Watch mode configuré
  • ✅ Scripts npm organisés
  • ✅ Source maps en dev
  • ✅ Production optimisée

Objectif : Maîtriser la compilation SCSS et créer un workflow professionnel.

Validation : Vous pouvez passer au module suivant quand vous maîtrisez la compilation SCSS et avez configuré un workflow fonctionnel.