Laravel Vite avec Bootstrap 5 sur nouvelle app

sergel

Serge Ledig

Posted on July 4, 2023

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
💖 💪 🙅 🚩
sergel
Serge Ledig

Posted on July 4, 2023

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

What was your win this week?
weeklyretro What was your win this week?

November 29, 2024

Where GitOps Meets ClickOps
devops Where GitOps Meets ClickOps

November 29, 2024

How to Use KitOps with MLflow
beginners How to Use KitOps with MLflow

November 29, 2024

Modern C++ for LeetCode 🧑‍💻🚀
leetcode Modern C++ for LeetCode 🧑‍💻🚀

November 29, 2024