Styliser l'interface avec Webpack

Installation du package webpack encore :

symfony composer req encore

Installation de sass au lieu de css :

Avant cette installation, je supprime tous les dossiers et fichiers présents dans les assets que j'avais mis jusqu'à maintenant.

mv assets/styles/app.css assets/styles/app.scss

Installation du chargeur Sass :

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

et activation dans webpack.config.js en décommentant la ligne :

.enableSassLoader()

Installation de Bootstrap :

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

On l'importe ensuite dans le fichier assets/app.scss et nous en profitons pour supprimer ce qu'il y avait de configuré :

@import '~bootstrap/scss/bootstrap';

et également dans le app.js :

/*
 * Welcome to your app's main JavaScript file!
 *
 * We recommend including the built version of this JavaScript file
 * (and its CSS file) in your base layout (base.html.twig).
 */

// 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';

bsCustomFileInput.init();

Activation de Bootstrap dans config/packages/twig.yaml :

twig:
    default_path: '%kernel.project_dir%/templates'
    form_themes: ['bootstrap_5_layout.html.twig']

Téléchargement et extraction de l'archive à la racine du projet :

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

Une erreur peut être levée lors de la command unzip, mais le fichier est quand même extrait.

Nous copions ensuite les fichiers présent dans le dossier assets et templates en lieu et place de ceux existants.

Générer les actifs :

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 :

symfony run -d npm run watch

FabRiviere / Livre_Or_Symfony