Laravel 8 avec le nouveau Bootstrap 5

Je le cache à personne, je trouve Tailwind idiot !
L'arrivé de Bootstrap en version 5 remet les pendules à l'heure, en oubliant le code vieillissant de prise en charge d'IE et Jquery.
Les composants JS à la sauce vanille peuvent être ajoutés au besoin.

Ouvrez le terminal, on se rend dans le dossier de l'app et let's code

Comme on ne veut pas de Tailwind, on vire postcss inutile :

npm uninstall postcss

Si vous n'allez pas utiliser Lodash et Axiox, on les vire :

npm uninstall axios lodash

On installe Bootstrap avec Popperjs et pour être prèt à compiler, on ajoute de suite Sass et les "loaders".


npm install @popperjs/core bootstrap resolve-url-loader sass-loader --save-dev

npm install sass@1.32.13 --save-dev --save-exact

ℹ️ j'ai forcé la version 1.32 de SASS à cause des warning ci-dessous, rencontrés quand on compile avec la version 1.33 ou supérieure.
Recommendation: math.div($spacer, 4)
1: $spacer / 4,
Recommendation: math.div($spacer, 2)
2: $spacer / 2, ...

EDITER

nano resources/js/bootstrap.js

COMME CECI


window._ = require('lodash');

import "bootstrap";

window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

ℹ️ j'ai supprimé les /* commentaires */ et le pré-remplissage // pour utiliser Echo
ℹ️ si vous n'utilisez pas Lodash et/ou Axios, vous pouvez effacer les lignes les concernant.

ATTENTION, nous allons travailler sur le fichier app.Scss et non app.Css (qu'on vire)

rm resources/css/app.css
nano resources/css/app.scss

AJOUTER

@import '~bootstrap/scss/bootstrap';

EDITER

nano webpack.mix.js

COMME CECI


const mix = require('laravel-mix');


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

   .sass('resources/css/app.scss', 'public/css');

if (mix.inProduction()) {
   mix.version();
}

ON COMPILE

npx mix

ON INSÉRE LE CSS DANS NOS VUES (ou mieux, dans le layout)

<link rel="stylesheet" href="{{ mix('css/app.css') }}">

Avant de fermer </head>

ET LE JS

<script src="{{ mix('js/app.js') }}"></script>

Avant de fermer </body>

J'ai cloné un Laravel 8 avec les modifications et l'ajout de laravel-ui qui permet l'inscription, connexion...

Le dépôt ici

Laravel 8 avec le nouveau Bootstrap 5

Je le cache à personne, je trouve Tailwind idiot ! L'arrivé de Bootstrap en version 5 remet les pendules à l'heure, en oubliant le code vieillissant de prise en charge d'IE et Jquery. Les composants JS à la sauce vanille peuvent être ajoutés au besoin.

Ouvrez le terminal, on se rend dans le dossier de l'app et let's code

Je le cache à personne, je trouve Tailwind idiot !
L'arrivé de Bootstrap en version 5 remet les pendules à l'heure, en oubliant le code vieillissant de prise en charge d'IE et Jquery.
Les composants JS à la sauce vanille peuvent être ajoutés au besoin.