Un tutoriel pour mettre en place le framework CSS Bootstrap 5 dans un projet Laravel 8 en utilisant npm et laravel-mix pour compiler les assets JavaScript et Sass
Bootstrap 5 est un framework CSS qui permet de créer des sites réactifs et adaptés aux mobiles. Il contient des codes HTML et CSS pour les formulaires, les boutons, le système de grille réactif et d'autres composants intéractifs, ainsi que des plugins JavaScript pour les boîtes modales, les alertes toasts, ...
Nous allons voir dans ce guide comment télécharger le framework CSS Bootstrap 5 dans un projet Laravel avec npm, l'importer puis le compiler avec Laravel Mix et l'intégrer dans une page web (template Blade) pour l'utiliser.
Dans un nouveau projet Laravel (Je suis à la version 8.42.1), lorsqu’on exécute la commande type package.json
pour voir le contenu du fichier /package.json à la racine du projet, on y trouve les lignes suivantes :
"devDependencies": {
"axios": "^0.21",
"laravel-mix": "^6.0.6",
"lodash": "^4.17.19",
"postcss": "^8.1.14"
}
Nous pouvons télécharger les packages « axios », « laravel-mix », « loadash » et « postcss » dans le dossier /node_modules en exécutant la commande npm suivante :
npm install
Nous allons utiliser laravel-mix pour compiler les fichiers JavaScript et Sass de Bootstrap 5 dans le dossier /public de Laravel.
Pour voir la version actuelle de Bootstrap, nous pouvons exécuter la commande npm suivante :
npm view bootstrap version
Puis pour télécharger Bootstrap 5 dans le dossier /node_modules et mettre à jour automatiquement le fichier /package.json :
npm install bootstrap --save-dev
Lors du téléchargement, npm affiche une alerte disant que @popperjs/core@^2.9.2 est requis pour Bootstrap 5 :
Bootstrap utilise @popperjs/core pour le positionnement des tooltips, popovers, ... Nous pouvons le télécharger en exécutant la commande npm suivante :
npm install @popperjs/core@^2.9.2 --save-dev
Finalement, nous devons avoir les lignes suivantes au fichier /package.json :
"devDependencies": {
"axios": "^0.21",
"bootstrap": "^5.0.1",
"laravel-mix": "^6.0.6",
"lodash": "^4.17.19",
"@popperjs/core": "^2.9.2",
"postcss": "^8.1.14"
}
Maintenant que nous avons Bootstrap 5 téléchargé dans le dossier /node_modules du projet Laravel, nous devons importer ses fichiers Javascript et Sass avant de les compiler avec Laravel Mix.
Pour les fichiers Sass de Bootstrap, créons le dossier « scss » dans /resources puis un nouveau fichier app.scss dans /resources/scss/. Insérons ensuite la ligne suivante au fichier /ressources/scss/app.scss :
@import "bootstrap";
Pour le JavaScript de Bootstrap, insérons la ligne suivante au fichier /resources/js/app.js :
import "bootstrap";
Les sources Sass et JavaScript de Bootstrap seront importés depuis /node_modules/bootstrap/
Pour compiler les fichiers JavaScript et Sass de Bootstrap avec Laravel Mix, nous devons éditer le fichier /webpack.mix.js de la manière suivante :
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
.sass("resources/scss/app.scss", "public/css");
Lors de la compilation, les packages « sass-loader », « sass » et « resolve-url-loader » nous seront demandés. Nous pouvons déjà les installer en exécutant la command npm suivante :
npm install sass-loader@^11.0.1 sass resolve-url-loader@^3.1.2 --save-dev --legacy-peer-deps
Ce qui nous donne la configuration suivante au fichier /package.json :
"devDependencies": {
"axios": "^0.21",
"bootstrap": "^5.0.1",
"laravel-mix": "^6.0.6",
"lodash": "^4.17.19",
"@popperjs/core": "^2.9.2",
"postcss": "^8.1.14",
"resolve-url-loader": "^3.1.2",
"sass": "^1.34.0",
"sass-loader": "^11.0.1"
}
Nous pouvons finalement compiler les assets Bootstrap 5 dans les fichiers /public/js/app.js et /public/css/app.css en exécutant la commande npm suivante :
npm run dev
Remarque : En compilant avec "sass": "^1.34.0"
, une erreur s'est produite suite à l'opérateur "/" utilisé pour la division dans certains fichiers .scss de Bootstrap. A partir de sa version 1.33.0, sass recommande d'utiliser math.div()
. (Voir documentation Sass).
J'ai donc dû regresser sass à la version 1.32.13 suivant le fichier package.json de Bootstrap puis tout est passé correctement :
npm install sass@^1.32.13
Maintenant que nous avons les fichiers /public/css/app.css et /public/js/app.js avec Bootstrap inclus, nous pouvons les inclures sur une page (template Blade) via l'helper asset()
de Laravel pour utiliser les composants Bootstrap 5 :
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel + Bootstrap 5</title>
<!-- Le css Bootstrap -->
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
</head>
<body >
<div class="container">
<h1 class="text-success" >Login</h1>
<form>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
<div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1">
</div>
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
<!-- Le javascript Bootstrap -->
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
Le rendu de ma page :
Portez-vous bien !
Cette publication vous a plu ?
Partagez-la avec vos ami(e)s sur les réseaux sociaux.
Wilo Ahadi, l'auteur
Passionné de l'informatique, je suis spécialiste en techniques des systèmes et réseaux, développeur web et mobile, infographiste et designer, ... J'aime partager mon expérience en formant sur la plateforme Akili School
Voir profil
Commentaires