Bootstrap 5 et Laravel avec Mix et Vite
Publié le par Benjamin Crozat
Temps de lecture estimé : 4 minutes
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/coreImportez 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 devCompilez 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 buildInstallez 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/coreConfigurez 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 devCodez
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
Inscrivez-vous ou connectez-vous d'abord.