Installation du projet Symfony

Prérequis

php -v

composer -v

node -v

npm -v

symfony check:requirements

Initialisation de votre projet avec la version 6.3

symfony new votre_projet --version="6.3.*"--webapp

Configuration de Webpack Encore avec Symfony

Installation du bundle Symfony Webpack Encore

composer require symfony/webpack-encore-bundle

Installation des dépendances dans le package.json

npm install

Lancement automatique de Webpack

npm run dev

Préprocesseur - Utilisation de Sass SCSS

Suivez la documentation pour activer Sass/SCSS dans votre projet.

Dans le fichier webpack.config.js, décommentez la ligne suivante :

.enableSassLoader() 

Puis exécutez :

npm install sass-loader@^13.0.0 sass --save-dev

Renommer dans "assets/styles/app.js"

import './styles/app.scss';

Renommer dans "assets/styles/"

app.scss

Postprocesseur - PostCSS et Autoprefixing

Suivez la documentation pour activer PostCSS dans votre projet.

Dans le fichier webpack.config.js, ajoutez la ligne suivante sous .enableSassLoader() :

.enablePostCssLoader()

Puis exécutez :

npm install postcss-loader@^7.0.0 --save-dev

Autoprefixer

npm install autoprefixer --save-dev

Créez un fichier à la racine du projet: postcss.config.js

Puis insérez le code suivant:

module.exports = {
    plugins: [
        require('autoprefixer')
    ]
}

Dans le fichier package.json, ajoutez à la liste des devDependencies:

"browserslist": ">0.0.1"

Référencer des images

Suivez la documentation pour copier et référencer des images dans votre projet.

Créez un dossier images dans assets. Dans webpack.config.js, sous

.enableSassLoader()
.enablePostCssLoader()

copiez le code suivant:

 .copyFiles({
        from: './assets/images',
        to: 'images/[path][name].[hash:8].[ext]',
    })

Puis exécutez :

npm install file-loader@^6.0.0 --save-dev

Installation de Bootstrap 5

Suivez la documentation pour installer Bootstrap 5.

npm i bootstrap@5.3.2

npm i --save bootstrap @popperjs/core

npm install jquery @popperjs/core --save-dev

Dans le fichier app.js:

const $ = require('jquery');
require('bootstrap');
document.addEventListener('DOMContentLoaded', function () {
    $('[data-toggle="popover"]').popover();
    $('[data-toggle="tooltip"]').tooltip();
});

puis en dessous :

// or, specify which plugins you need :
import { Tooltip, Toast, Popover } from 'bootstrap';

Dans le fichier app.scss:

// Import all of Bootstrap's CSS by default
@import "~bootstrap/scss/bootstrap";