Compilation & Outils
Transformer ton SCSS en CSS optimisé pour la production.
12.1Qu'est-ce que la compilation ?
La compilation, c'est le processus qui transforme ton code SCSS en CSS standard. Les navigateurs ne comprennent que le CSS classique, donc il faut "traduire" toutes tes fonctionnalités avancées :
// TON CODE SCSS
$primary-color: #3498db;
.button {
background: $primary-color;
padding: 1rem;
&:hover {
background: darken($primary-color, 10%);
}
@include shadow(2);
}Devient en CSS compilé :
/* CSS COMPILÉ */
.button {
background: #3498db;
padding: 1rem;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.button:hover {
background: #2980b9;
}12.2Dart Sass : le compilateur officiel
Dart Sass est le compilateur officiel et le plus à jour. Il supporte toutes les fonctionnalités modernes et est constamment mis à jour :
# Installation via npm
npm install -g sass
# Compilation basique
sass input.scss output.css
# Compilation avec watch (surveillance des fichiers)
sass --watch input.scss:output.css
# Compilation d'un dossier entier
sass --watch scss/:css/Options de compilation utiles :
# Style de sortie compressé (production)
sass --style=compressed input.scss output.css
# Avec source maps pour le debugging
sass --source-map input.scss output.css
# Surveillance avec style compressé
sass --watch --style=compressed scss/:css/12.3Configuration avec Vite
Vite est un outil de build moderne qui gère SCSS nativement. Configuration super simple :
# Installation
npm create vite@latest mon-projet
cd mon-projet
npm install
# Ajouter le support SCSS
npm install -D sassVite détecte automatiquement les fichiers .scss et les compile à la volée :
// vite.config.js
import { defineConfig } from 'vite'
export default defineConfig({
css: {
preprocessorOptions: {
scss: {
// Variables globales disponibles partout
additionalData: `@use 'src/styles/abstracts/variables' as *;`
}
}
}
})12.4Webpack et sass-loader
Si tu utilises Webpack, le sass-loader s'occupe de la compilation :
# Installation des dépendances
npm install -D sass-loader sass webpack// webpack.config.js
module.exports = {
module: {
rules: [
{
test: /.scss$/,
use: [
'style-loader', // Injecte le CSS dans le DOM
'css-loader', // Interprète @import et url()
'sass-loader' // Compile SCSS vers CSS
]
}
]
}
}12.5Outils de développement
Les bons outils font toute la différence pour un workflow fluide :
Extensions VS Code
- Sass (.sass only) : Coloration syntaxique pour .sass
- SCSS IntelliSense : Autocomplétion pour variables et mixins
- Live Sass Compiler : Compilation en temps réel
- Sass Formatter : Formatage automatique du code
Configuration EditorConfig
# .editorconfig
root = true
[*.{scss,sass}]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true12.6Linting avec Stylelint
Stylelint vérifie la qualité de ton code SCSS et détecte les erreurs :
# Installation
npm install -D stylelint stylelint-scss stylelint-config-standard-scss
# Vérification des fichiers
npx stylelint "**/*.scss"
# Correction automatique
npx stylelint "**/*.scss" --fix// .stylelintrc.json
{
"extends": [
"stylelint-config-standard-scss"
],
"rules": {
"indentation": 2,
"selector-max-nesting-depth": 3,
"scss/at-mixin-pattern": "^[a-z][a-zA-Z0-9]*$",
"scss/dollar-variable-pattern": "^[a-z][a-zA-Z0-9]*(-[a-z][a-zA-Z0-9]*)*$"
}
}12.7Source Maps pour le debugging
Les source maps te permettent de voir ton code SCSS original dans les DevTools du navigateur :
# Génération avec Dart Sass
sass --source-map input.scss output.css
# Le fichier .map est créé automatiquement
# output.css.mapAvec les source maps activées, quand tu inspectes un élément dans le navigateur, tu vois :
12.8Optimisation pour la production
En production, tu veux un CSS optimisé et léger :
# Compilation minifiée
sass --style=compressed --no-source-map src/styles/:dist/css/
# Avec PostCSS pour autoprefixer
npm install -D postcss autoprefixer cssnano// postcss.config.js
module.exports = {
plugins: [
require('autoprefixer'), // Ajoute les préfixes automatiquement
require('cssnano') // Minification avancée
]
}12.9Workflow complet avec npm scripts
Configure des scripts npm pour automatiser ton workflow :
// package.json
{
"scripts": {
"scss:dev": "sass --watch --source-map src/scss/:dist/css/",
"scss:build": "sass --style=compressed --no-source-map src/scss/:dist/css/",
"scss:lint": "stylelint 'src/**/*.scss'",
"scss:fix": "stylelint 'src/**/*.scss' --fix",
"build": "npm run scss:lint && npm run scss:build",
"dev": "concurrently 'npm run scss:dev' 'live-server dist'"
}
}# Commandes disponibles
npm run dev # Mode développement avec watch
npm run build # Build de production
npm run scss:lint # Vérification du code
npm run scss:fix # Correction automatique12.10Gestion des erreurs de compilation
Les erreurs de compilation SCSS sont généralement explicites. Voici les plus courantes :
// ❌ Erreur : Variable non définie
.button {
color: $primary-color; // Error: Undefined variable.
}
// ❌ Erreur : Mixin non trouvé
.card {
@include shadow; // Error: Undefined mixin.
}
// ❌ Erreur : Import introuvable
@use 'non-existent'; // Error: Can't find stylesheet.
// ❌ Erreur : Syntaxe invalide
.element {
color #red; // Error: Expected ":".
}Les messages d'erreur indiquent généralement :
- Le fichier où se trouve l'erreur
- La ligne et colonne exacte
- Une description du problème
- Un contexte autour de l'erreur
12.11Performance et monitoring
Surveille les performances de compilation sur gros projets :
# Analyse du temps de compilation
time sass large-project.scss output.css
# Analyse de la taille finale
ls -lh output.css
# Analyse des selectors avec tools comme PurgeCSS
npm install -D @fullhuman/postcss-purgecss12.12Déploiement et CI/CD
Intègre la compilation SCSS dans ton pipeline de déploiement :
# .github/workflows/build.yml
name: Build and Deploy
on:
push:
branches: [ main ]
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- name: Setup Node.js
uses: actions/setup-node@v3
with:
node-version: '18'
- name: Install dependencies
run: npm ci
- name: Lint SCSS
run: npm run scss:lint
- name: Build CSS
run: npm run scss:build
- name: Deploy
run: npm run deploy