Skip to content
  • About
    • What is Symfony?
    • Community
    • News
    • Contributing
    • Support
  • Documentation
    • Symfony Docs
    • Symfony Book
    • Screencasts
    • Symfony Bundles
    • Symfony Cloud
    • Training
  • Services
    • Platform.sh for Symfony Best platform to deploy Symfony apps
    • SymfonyInsight Automatic quality checks for your apps
    • Symfony Certification Prove your knowledge and boost your career
    • SensioLabs Professional services to help you with Symfony
    • Blackfire Profile and monitor performance of your apps
  • Other
  • Blog
  • Download
sponsored by SensioLabs
  1. Home
  2. Documentation
  3. Symfony: The Fast Track
  4. French
  5. Styliser l'interface avec Webpack
  • Documentation
  • Book
  • Reference
  • Bundles
  • Cloud

Table of Contents

  • Utiliser Sass
  • Tirer parti de Bootstrap
  • Styliser le HTML
  • Générer les assets

Styliser l'interface avec Webpack

Styliser l'interface avec Webpack

Nous n'avons pas encore travaillé sur la conception de l'interface. Pour styliser comme un pro, nous utiliserons une stack moderne, basée sur Webpack. Et pour ajouter une touche de Symfony et faciliter son intégration avec l'application, installons Webpack Encore :

1
$ symfony composer req encore

Un environnement Webpack complet a été créé pour vous : les fichiers package.json et webpack.config.js ont été générés avec une bonne configuration par défaut. Ouvrez webpack.config.js, il utilise l'abstraction Encore pour configurer Webpack.

Le fichier package.json définit des commandes très pratiques que nous utiliserons sans arrêt.

Le répertoire assets contient les principaux points d'entrée des assets du projet : styles/app.css et app.js.

Utiliser Sass

Au lieu de se contenter simplement de CSS, nous utiliserons Sass :

1
$ mv assets/styles/app.css assets/styles/app.scss
1
2
3
4
5
6
7
8
9
10
11
--- a/assets/app.js
+++ b/assets/app.js
@@ -6,7 +6,7 @@
  */

 // any CSS you import will output into a single css file (app.css in this case)
-import './styles/app.css';
+import './styles/app.scss';

 // start the Stimulus application
 import './bootstrap';

Installez le loader Sass :

1
$ npm install node-sass sass-loader --save-dev

Et activez-le dans webpack :

1
2
3
4
5
6
7
8
9
10
11
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -57,7 +57,7 @@ Encore
     })

     // enables Sass/SCSS support
-    //.enableSassLoader()
+    .enableSassLoader()

     // uncomment if you use TypeScript
     //.enableTypeScriptLoader()

Comment savoir quels paquets installer ? Si nous avions essayé de générer nos assets sans ceux-ci, Encore nous aurait donné un joli message d'erreur suggérant la commande npm install à exécuter pour installer les dépendances servant à charger les fichiers .scss.

Tirer parti de Bootstrap

Pour commencer avec de bonnes bases et construire un site web responsive, un framework CSS comme Bootstrap sera très utile. Installez-le comme paquet :

1
$ npm install bootstrap @popperjs/core bs-custom-file-input --save-dev

Ajoutez Bootstrap dans le fichier CSS (nous avons aussi nettoyé le fichier) :

1
2
3
4
5
6
7
--- a/assets/styles/app.scss
+++ b/assets/styles/app.scss
@@ -1,3 +1 @@
-body {
-    background-color: lightgray;
-}
+@import '~bootstrap/scss/bootstrap';

Faites de même pour le fichier JS :

1
2
3
4
5
6
7
8
9
10
11
12
13
--- a/assets/app.js
+++ b/assets/app.js
@@ -7,6 +7,10 @@

 // any CSS you import will output into a single css file (app.css in this case)
 import './styles/app.scss';
+import 'bootstrap';
+import bsCustomFileInput from 'bs-custom-file-input';

 // start the Stimulus application
 import './bootstrap';
+
+bsCustomFileInput.init();

Le système de formulaire de Symfony supporte Bootstrap nativement avec un thème spécial. Activez-le :

config/packages/twig.yaml
1
2
twig:
    form_themes: ['bootstrap_5_layout.html.twig']

Styliser le HTML

Nous pouvons maintenant styliser l'application. Téléchargez et extrayez l'archive à la racine du projet :

1
2
3
$ php -r "copy('https://symfony.com/uploads/assets/guestbook-6.2.zip', 'guestbook-6.2.zip');"
$ unzip -o guestbook-6.2.zip
$ rm guestbook-6.2.zip

Jetez un coup d’œil aux templates, vous pourriez apprendre un truc ou deux sur Twig.

Générer les assets

Il y a une différence majeure quand on utilise Webpack : les fichiers CSS et JS ne sont pas utilisables directement par l'application. Ils doivent d'abord être "compilés".

En développement, la compilation des ressources peut se faire avec la commande encore dev :

1
$ symfony run npm run dev

Au lieu d'exécuter la commande chaque fois qu'il y a une modification, exécutez-la en arrière-plan et laissez-la surveiller les changements des fichiers JS et CSS :

1
$ symfony run -d npm run watch

Prenez le temps de découvrir les modifications visuelles. Jetez un coup d'œil au nouveau design dans un navigateur.

/
/conference/amsterdam-2019

Étant donné que le Maker Bundle utilise les classes CSS de Bootstrap par défaut, le formulaire de connexion précédemment généré est maintenant automatiquement stylisé :

/login

En production, Platform.sh détecte automatiquement que vous utilisez Encore et compile les ressources pour vous pendant la phase de build.

Aller plus loin

  • Documentation Webpack ;
  • Documentation Symfony Webpack Encore ;
  • Tutoriel SymfonyCasts sur Webpack Encore.
Previous page Mettre en cache pour la performance
Next page Redimensionner des images
This work, including the code samples, is licensed under a Creative Commons BY-NC-SA 4.0 license.
TOC
    Version
    We stand with Ukraine.
    Version:
    Locale:

    This book is backed by:

    see all backers

    Symfony footer

    ↓ Our footer now uses the colors of the Ukrainian flag because Symfony stands with the people of Ukraine.

    Avatar of Zlatoslav Desyatnikov, a Symfony contributor

    Thanks Zlatoslav Desyatnikov for being a Symfony contributor

    2 commits • 44 lines changed

    View all contributors that help us make Symfony

    Become a Symfony contributor

    Be an active part of the community and contribute ideas, code and bug fixes. Both experts and newcomers are welcome.

    Learn how to contribute

    Symfony™ is a trademark of Symfony SAS. All rights reserved.

    • What is Symfony?

      • Symfony at a Glance
      • Symfony Components
      • Case Studies
      • Symfony Releases
      • Security Policy
      • Logo & Screenshots
      • Trademark & Licenses
      • symfony1 Legacy
    • Learn Symfony

      • Symfony Docs
      • Symfony Book
      • Reference
      • Bundles
      • Best Practices
      • Training
      • eLearning Platform
      • Certification
    • Screencasts

      • Learn Symfony
      • Learn PHP
      • Learn JavaScript
      • Learn Drupal
      • Learn RESTful APIs
    • Community

      • SymfonyConnect
      • Support
      • How to be Involved
      • Code of Conduct
      • Events & Meetups
      • Projects using Symfony
      • Downloads Stats
      • Contributors
      • Backers
    • Blog

      • Events & Meetups
      • A week of symfony
      • Case studies
      • Cloud
      • Community
      • Conferences
      • Diversity
      • Documentation
      • Living on the edge
      • Releases
      • Security Advisories
      • SymfonyInsight
      • Twig
      • SensioLabs
    • Services

      • SensioLabs services
      • Train developers
      • Manage your project quality
      • Improve your project performance
      • Host Symfony projects

      Deployed on

    Follow Symfony

    Search by Meilisearch