Laravel Vite avec Bootstrap 5 sur nouvelle app
Serge Ledig
Posted on July 4, 2023
Installez Boostrap et ses dépendances
npm i --save-dev sass bootstrap @popperjs/core
Configurer Vite
Modifiez le fichier vite.config.js à la racine de votre App comme suit :
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({
plugins: [
laravel({
input: [
'resources/sass/app.scss',
'resources/js/app.js',
],
refresh: true,
}),
],
});
Importer Bootstrap
Supprimez le dossier resources/css/app.css installé par défaut.
Créez le dossier resources/sass, puis créez le fichier resources/sass/app.scss et éditez le comme suit :
@import "bootstrap/scss/bootstrap";
Editez resources/js/bootstrap.js comme suit :
(PopperJs sera importé automatiquement)
import * as bootstrap from 'bootstrap'
window.bootstrap = bootstrap;
Compiler
La compilation se fait comme sous Laravel-mix :
npm run dev
Pour la mise en production
npm run build
Le mode "dev" génère un fichier "hot" dans /Public
Le mode "build" génèrera les éléments dans /public/build pour la mise en production du site.
Importer les "assets" CSS/JS dans les vues avec la directive Blade @vite
@vite(['resources/sass/app.scss', 'resources/js/app.js'])
Bien sûr, il est préférable de ne l'importer qu'une seule fois dans un fichier "Layouts"
Pour finir
Et un petit coup de nettoyage pour bien repartir :
php artisan clear-compiled &&
php artisan auth:clear-resets &&
php artisan cache:clear &&
php artisan config:clear &&
php artisan route:clear &&
php artisan view:clear
composer dump-autoload
Posted on July 4, 2023
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.