Aller au contenu principal

AssetMapper et Bootstrap

Utiliser les styles CSS de Bootstrap dans Symfony avec AssetMapper

Notions théoriques​

AssetMapper est le gestionnaire d'actifs par défaut dans Symfony 7+ pour les nouveaux projets Web, et il simplifie l'intégration de bibliothèques comme Bootstrap sans outil de build complexe comme Webpack Encore.

Bootstrap est principalement un framework CSS, mais il inclut aussi du JavaScript (pour les composants interactifs).

Exemple pratique​

1. Prérequis : Installer AssetMapper (si ce n'est pas déjà fait)​

Si votre projet Symfony n'utilise pas encore AssetMapper, installez-le avec Composer :

composer require symfony/asset-mapper symfony/asset symfony/twig-pack

Cela crée les fichiers de base comme assets/app.js et importmap.php.

2. Ajouter Bootstrap à l'ImportMap​

Utilisez la commande importmap:require pour télécharger et mapper les fichiers de Bootstrap depuis jsDelivr (un CDN pour les paquets npm). Pour les styles CSS :

php bin/console importmap:require bootstrap/dist/css/bootstrap.min.css
  • Cela ajoute une entrée dans config/importmap.php comme : 
    'bootstrap/dist/css/bootstrap.min.css' => [
        'version' => '5.3.3',  // Version actuelle
        'type' => 'css',
    ],
  • Si vous voulez aussi le JavaScript de Bootstrap (recommandé pour les tooltips, modals, etc.), ajoutez : 
    php bin/console importmap:require bootstrap
    php bin/console importmap:require @popperjs/core  // Dépendance de Bootstrap JS

3. Importer les styles CSS dans votre fichier JavaScript principal​

Ouvrez assets/app.js (point d'entrée principal) et ajoutez l'import pour charger le CSS automatiquement :

// assets/app.js
import 'bootstrap/dist/css/bootstrap.min.css';  // Importe le CSS de Bootstrap

// Si vous avez du JS Bootstrap :
import 'bootstrap';  // Importe le JS
  • AssetMapper détecte cet import et ajoute une balise <link> pour le CSS dans le <head> de vos templates Twig.
  • Si vous avez des icônes Bootstrap, ajoutez : 
    php bin/console importmap:require bootstrap-icons/font/bootstrap-icons.min.css
    Puis importez dans app.js : import 'bootstrap-icons/font/bootstrap-icons.min.css';.

4. Charger les assets dans vos templates Twig​

Dans votre template de base (ex. : templates/base.html.twig), ajoutez :

{{ importmap('app') }}
  • Cela inclut la balise <script type="importmap"> pour charger l'ImportMap, et les balises <script> et <link> pour vos actifs (y compris le CSS de Bootstrap).
  • Exemple complet dans <head> : 
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>{% block title %}Welcome!{% endblock %}</title>
            {{ importmap('app') }}  {# Charge CSS et JS #}
            {% block stylesheets %}{% endblock %}
        </head>
        <body>
            {% block body %}{% endblock %}
            {% block javascripts %}{% endblock %}
        </body>
    </html>

5. Utiliser les classes CSS de Bootstrap dans vos templates​

Une fois chargé, appliquez les classes Bootstrap directement dans vos vues Twig. Exemple :

{# templates/home/index.html.twig #}
{% extends 'base.html.twig' %}

{% block body %}
    <div class="container mt-4">
        <h1 class="text-center">Hello Bootstrap !</h1>
        <button class="btn btn-primary">Un bouton stylé</button>
        <div class="row">
            <div class="col-md-6">
                <p>Contenu en grille.</p>
            </div>
        </div>
    </div>
{% endblock %}
  • Les styles comme .container, .btn-primary, etc., s'appliquent automatiquement.

6. Conseils avancés et dépannage​

  • Icônes et fonts : Pour les icônes, copiez le dossier fonts/ de Bootstrap dans public/fonts/ ou utilisez l'import CSS ci-dessus.
  • Personnalisation : Si vous voulez modifier les variables Bootstrap (ex. : couleurs), utilisez Sass avec le bundle symfonycasts/sass-bundle : 
    composer require symfonycasts/sass-bundle
    Puis importez @import "~bootstrap/scss/bootstrap"; dans un fichier .scss.
  • Erreurs courantes :
    • "Failed to resolve module specifier 'bootstrap'" : Vérifiez l'ImportMap avec php bin/console debug:importmap.
    • CSS non chargé : Assurez-vous que l'import est dans app.js et que {{ importmap('app') }} est présent.
    • Production : Activez le mode debug=false et configurez la compression (disponible depuis Symfony 7.3).
  • Performance : AssetMapper ajoute des hashes de version aux fichiers pour le cache long-terme. Utilisez des outils comme Lighthouse pour tester.
astuce

Cette approche est simple et moderne, sans Node.js ni build.

Pour plus de détails, consultez la documentation Symfony sur AssetMapper.

Résumé​

composer require symfony/asset-mapper symfony/asset symfony/twig-pack

pour le CSS :

php bin/console importmap:require bootstrap/dist/css/bootstrap.min.css

pour le JS :

php bin/console importmap:require bootstrap
php bin/console importmap:require @popperjs/core  // Dépendance de Bootstrap JS

Dans assets/app.js (point d'entrée principal) ajoutez ces lignes pour charger le CSS et le JS :

// assets/app.js
import 'bootstrap/dist/css/bootstrap.min.css';  // Importe le CSS de Bootstrap

// Si vous avez du JS Bootstrap :
import 'bootstrap';  // Importe le JS
```twig


Dans templates/base.html.twig) il faut ajouter :

```twig
{{ importmap('app') }}

Vider le cache​

php bin/console cache:clear
php bin/console debug:asset-map
php bin/console asset-map:compile

et supprimer le contenu du dossier /public/assets