preloader

Comment intégrer bootstrap 5 a...

Comment intégrer bootstrap 5 avec Webpack-encore dans un projet Symfony 5?

Webpack-encore est une surcouche de Webpack qui permet de gérer les assets(js,css, images...) dans un projet Symfony. Il est aussi possible de l'utiliser dans un projet non Symfony.

Pour illustrer son utilisation avec SF5, créons un projet Symfony 5 vierge:


 symfony new tuto1 --full

Ensuite, installons Webpack-encore via composer:


 composer req encore --dev

Installations des dépendances JS via commande yarn ou npm:


 yarn install

Installation de bootstrap 5(version bêta) et d'autres dépendances


 yarn add -D sass-loader@^8.0.0 node-sass@^4.14.1 bootstrap@^5.0.0-alpha1 popper.js@^1.16.1 font-awesome


Dans le fichier assets/js/app.js , on effectue l'import de bootstrap(en que module js) puis l'import du fichier scss:


 //assets/js/app.js
import 'bootstrap';
//fichier scss contenant nos css
import '../css/app.scss';


Dans le fichier assets/css/app.scss:


@import "~font-awesome"; // fichier scss dans node_modules
@import '~bootstrap'; //fichier scss dans node_modules

On passe à l'étape de la compilation avec yarn ou npm. Après compilation les fichiers générés se trouvent dans le dossier public/build


#compilation
yarn run dev

Dans le template principal ( base.html.twig), on peut lier le CSS et le JS à l'aide des fonctions twig:


{# base.html.twig #}
{# appel du fichier css situé dans public/build #}
 {% block stylesheets %}
       {{ encore_entry_link_tags('app') }}
 {% endblock %}


{# appel du fichier js situé dans public/build #}
{% block javascripts %}
        {{ encore_entry_script_tags('app') }}
{% endblock javascripts%}

sources github