Installer bootstrap avec symfony et webpack encore

Installer bootstrap avec symfony et webpack encore

web

La documentation du framework symfony est vraiment très bien fichue mais ce petit mémo pour installer Webpack Encore bundle et bootstrap me sera utile une fois que j'aurais tout oublié ;-).

on se crée d'abord un nouveau projet avec la commande symfony

symfony new mon-projet --webapp

--webapp permettant de tout installer pour une application web traditionnelle

on installe et on paramètre le bundle Webpack Encore

cd mon-projet
composer require symfony/webpack-encore-bundle
npm install

Comme on souhaite faire du scss on va dans le répertoire assets/styles et on renomme le fichier styles.css par styles.scss

Nous allons dans le fichier /assets/app.js pour modifier la ligne import './styles/app.css'; et mettre import './styles/app.scss';

Dans le fichier webpack.config.js qui se trouve à la racine de notre projet, nous dé-commentons .enableSassLoader()

Nous installons ensuite le module sass-loader en faisant un :

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

Seulement pour le développement d'où le --save-dev.

Dans la version 6.0 de Symfony, l'installeur par l'intermédiaire de composer installe tout seul les interpolations pour le chargement des styles et du javascript pour compiler avec webpack. Si ce n'est pas le cas rajoutez dans le fichier /templates/base.html.twig les lignes {{ encore_entry_link_tags('app') }} pour le css {{ encore_entry_script_tags('app') }} pour le javascript :

<head>
    ...
    {% block stylesheets %}{{ encore_entry_link_tags('app') }}{% endblock %}
    ...
</head>
<body>
    ...
    {% block javascripts %}{{ encore_entry_script_tags('app') }}{% endblock %}
    ...
</body>

On finit par un npm run build pour vérifier que la compilation fonctionne et que nous n'avons pas d'erreurs.

Un autre module décrit dans la documentation de Symfony est le module postcss-loader qui nous permet de faire plein de transformations sur notre css comme l'autoprefixing et autre vérificateur syntaxique et de convention et autres joyeusetés à voir dans la docs de symfony

On les installe : 

npm install postcss-loader autoprefixer --dev

et on crée le fichier postcss.config.js à la racine du projet. On y ajoute le code suivant : 

module.exports = {
    plugins: {
        autoprefixer: {}
    }
}

A nouveau npm run build pour vérifier que nous n'avons pas d'erreurs

On va pouvoir enfin installer bootstrap5

npm install bootstrap (vu dans la doc de bootstrap) , on peut aussi le faire avec gem, composer, etc en fonction de votre configuration.

Une fois installé on retourne dans /asset/app.js et on importe les plugins bootstrap que l'on veut utiliser. Par exemple : 

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

Comme notre objectif est de customiser bootstrap on va se créer le fichier custom.scss dans /assets/styles qui va accueillir nos customisation du style du framework.

On n'oublie d'importer les styles dans /assets/styles/app.scss pour qu'ils soient pris en compte.

@import "custom";
@import "~bootstrap/scss/bootstrap";

On vérifie que tout va bien en lançant un npm run build

A partir de là on peut utiliser bootstrap comme d'habitude dans nos template twig. Je peux, comme l'indique la documentation faire maintenant tous les custom que je veux grace à sass et je les ajoute dans le fichier custom.scss. A la compilation, Webpack appliquera avec sa magie nos modifications du framework bootstrap que nous aurons fait.

J'espère arriver à me relire quand j'aurais besoin de refaire tout ce bazar et que cela puissse aussi servir à d'autres personnes le cas échéant. tcho !

Previous Post Next Post


Creative Commons License