DEV Community

Serge Ledig
Serge Ledig

Posted on

1

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

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay