Bootstrap 5 et Laravel avec Mix et Vite

Avatar de Benjamin Crozat.

Publié le par Benjamin Crozat

Temps de lecture estimé : 4 minutes

Bootstrap 5 est l'outil le plus populaire pour concevoir des interfaces travaillées en un clin d'œil. Intégrons-le dans Laravel grâce à Vite ou Mix.

Avez-vous un projet en tête ? Vous souhaitez gagner du temps sur la conception de l’interface utilisateur ? Vous avez besoin d’un système de grille pour simplifier la mise en page ainsi que de quelques composants prêts à l’emploi ?
Dans ce cas, Bootstrap 5 est un excellent choix. Il s’agit d’un framework open source qui vous permettra, même sans aucune compétence de designer, de créer en un clin-d’œil des interfaces travaillées.

Voyons ensemble comment utiliser Bootstrap 5 dans n’importe quel projet Laravel utilisant Vite ou Mix. Utilisez la table des matières ci-dessus pour vous rendre à la section qui vous intéresse le plus.

Installez et utilisez Bootstrap 5 avec Vite

Installez Bootstrap via NPM

Plutôt que d’utiliser le CDN de Bootstrap, nous allons l’empaqueter avec Vite.

Exécutez la commande suivante (notez la présence de Popper qui est indispensable) :

npm i --save bootstrap @popperjs/core

Importez Bootstrap 5

Ouvrez resources/js/app.js et ajoutez ceci :

import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'

Oui, nous appelons du CSS dans du JavaScript ! Mais ne vous inquiétez pas, c’est tout à fait normal. Pour la production, le CSS sera extrait comme il faut dans un fichier app.css et vous n’avez pas à vous en soucier.

Utilisez la directive Blade @vite afin d’appeler votre CSS et votre JavaScript

Avant de compiler, il vous faut appeler le CSS et le JavaScript sur votre page grâce à la directive @vite :

<!DOCTYPE html>
<html>
<head>
 
@vite(['resources/js/app.css', 'resources/js/app.js'])
</head>
<body>
</body>
</html>

Codez en live sans effort

L’une des forces de Vite par rapport à Webpack est le live reload quasi-instantané.

npm run dev

Compilez pour la production

À l’instar de Webpack, la commande build génèrera des fichiers app.css et app.js optimisés pour une utilisation en production.

npm run build

Installez et utilisez Bootstrap 5 avec Laravel Mix

Installez Bootstrap 5

Plutôt que d’utiliser le CDN de Bootstrap 5, nous allons l’empaqueter grâce à Laravel Mix (qui est en fait une abstraction autour de Webpack).

Exécutez la commande suivante (notez la présence de Popper qui est indispensable) :

npm i --save bootstrap @popperjs/core

Configurez Laravel Mix

Dans votre fichier webpack.mix.js, assurez-vous d’avoir ceci :

mix
.css('resources/css/app.css', 'public/css')
.js('resources/js/app.js', 'public/js')

Importez Bootstrap

Grâce à Laravel Mix, il est possible d’organiser son code JavaScript en modules, tout comme en PHP avec la fonction include(). Rendez-vous dans resources/js/app.js et ajoutez ceci :

import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'

Oui, nous appelons un fichier CSS dans du JavaScript ! Mais ne vous inquiétez pas, c’est tout à fait normal. Une fois terminé avec ce tutoriel, jetez un œil à votre page, vous verez qu’il sera inclut dans une balise <style>.

Utilisez le helper mix() afin d’appeler votre CSS et votre JavaScript

Avant de compiler, il vous faut appeler le CSS et le JavaScript sur votre page grâce aux balises <link /> et <script>, ainsi que le helper mix() :

<!DOCTYPE html>
<html>
<head>
 
<link rel="stylesheet" href="{{ mix('/css/app.css') }}" />
</head>
<body>
 
<script src="{{ mix('/js/app.js') }}"></script>
</body>
</html>

Compilez

La commande suivant vous permettra de générer les fichiers public/css/app.css et public/js/app.js :

npm run dev

Codez

Il est possible de demander à Mix de surveiller le moindre changement dans nos fichiers CSS et JavaScript et de tout re-compiler à la volée.

npm run watch

Évitez le cache côté navigateur lorsque le code a changé

Afin d’éviter que votre navigateur vous serve une version mise en cache de votre JavaScript et votre CSS, ajoutez ceci à votre webpack.mix.js:

mix
.css('resources/css/app.css', 'public/css')
.js('resources/js/app.js', 'public/js')
+ .version()

En coulisse, Laravel Mix se contentera simplement d’ajouter une query string à la fin de l’URL (exemple : /css/app.css?id=d907e32d5bfb758e04474f878b0216c3), ce qui sera suffisant pour faire comprendre à votre navigateur que vous avez besoin de code frais.

Diminuez la taille de vos fichiers en important le strict nécessaire

Lors de la compilation, votre empaqueteur de dépendances prend soin de minifier votre CSS et votre JavaScript. Combinez ça à de la compression côté serveur et vous obtiendrez des fichiers vraiment légers.
Ceci étant dit, il est possible d’aller plus loin encore en important seulement les briques de Bootstrap dont vous avez l’usage.

Admettons que pour votre site, vous n’utilisez que les alertes et les tooltips. Alors nous changeront notre app.js comme ceci :

-import 'bootstrap'
+import { Alert, Tooltip } from 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'

0 commentaire

Besoin d'aide ? Envie de partager ?
Inscrivez-vous ou connectez-vous d'abord.

Ça vous a plu ?
Abonnez-vous à la newsletter !

Recevez régulièrement news, trucs et astuces à propos de Laravel et son ecosystème.

Autres articles à lire