DEV Community

Serge Ledig
Serge Ledig

Posted on

Laravel Vite avec Bootstrap 5 sur nouvelle app

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,
    }),
  ],
});
Enter fullscreen mode Exit fullscreen mode

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; 
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Top comments (0)