Laravel 8 avec Bootstrap 5

Je ne le cache à personne, j'aime pas Tailwind 😋
L'arrivé de Bootstrap 5 remet les pendules à l'heure, en purgeant le code d'IE et de Jquery.
Les composants CSS et JS peuvent être ajoutés au besoin.

---

Ouvrez le terminal, allez dans le dossier de l'app
cd /path/to/your.app

Comme on ne veut pas de Tailwind, on vire postcss :
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, ...

EDITEZ
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';
ENREGISTREZ, FERMEZ
CTRL + x
o
ℹ️ 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

AJOUTEZ
@import '~bootstrap/scss/bootstrap';
ENREGISTREZ, FERMEZ
CTRL + x
o

EDITEZ
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();
}

COMPILEZ
npx mix

INSÉREZ LE CSS DANS LES 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>

Comments

[Serge Ledig]

Bootstrap 4 et 5 ont étés mis à jour et le problème avec SASS est résolu.
Vous pouvez maintenant installer SASS sans préciser la version exacte.