Installer Bootstrap 5 via npm et laravel Mix dans Laravel

Mis à jour il y a 2 ans

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

Wilo Ahadi

Auteur

Wilo A.

Technologies

Laravel, Bootstrap, CSS
Voir aussi Un tutoriel pour insérer des données aléatoires générées par les Factories et Faker dans une base de données en utilisant Tinker dans un projet Laravel. En savoir plus

Introduction

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.

Télécharger Bootstrap 5 et popper.js via npm

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@5.0.1 requires @popperjs/core

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"
}

Importer Bootstrap 5 dans Laravel

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/

Compiler les assets Bootstrap avec Laravel Mix

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

Utiliser Bootstrap 5 dans Laravel

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 :

Formulaire de connexion - login form

Portez-vous bien !

Cette publication vous a plu ?
Partagez-la avec vos ami(e)s sur les réseaux sociaux.

Wilo Ahadi

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