Aquí te enseño paso a paso como hacer para que en una instalación limpia de Laravel 11 puedas trabajar con Bootstrap 5 en vez de Tailwind CSS usando Vite, mediante instalación por NPM, desde mi punto de vista la forma más limpia de hacerlo ya que así conseguimos comprimir los ficheros tanto CSS y JS integrandolo en el proyecto. Hay que tener en cuenta que en este manual no estoy instalando ni el paquete Breeze ni el paquete Jetstream, si lo necesitas, debes instalar primero ambos paquetes y luego seguir este manual, ya que de lo contrario la instalación de Jetsream por ejemplo va a machacar los cambios de aquí abajo.

Dicho esto, para usar Bootstrap 5 en una instalación limpia de Laravel 11, sigue estos pasos:

composer create-project laravel/laravel bootstrap.laravel.com
cd bootstrap.laravel.com
npm install -D bootstrap@5.3.3
npm install -D sass

Hecho esto, de forma manual, modifica el nombre de la carpeta resources/css/app.css por resources/sass/app.css y también modifica el archivo que lo contiene app.css por app.scss.

El resultado final deberia ser: resources/sass/app.scss

Como hemos modificado el nombre de la carpeta y el fichero, deberemos modificar también el contenido del archivo vite.config.js, para que la ruta que antes apuntaba a css/app.css apunte a a sass/app.scss, deberia quedar así:


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,
        }),
    ],
});

Dentro del archivo resources/js/app.js deberías tener esto:

import './bootstrap';

Dentro del archivo resources/sass/app.scss deberías tener esto:

@import 'bootstrap/scss/bootstrap';

En tu archivo app.blade.php o en su defecto welcome.blade.php resources/sass/app.scss deberías sustituir el style donde está todo el estilo de Tailwind CSS por esto:

@vite(['resources/sass/app.scss', 'resources/js/app.js'])

Hecho todo esto, solo nos queda ejecutar:

npm run dev
npm run build

Para comprobar si ya te está funcionando, simplemente debes borrar TODO el contenido de dentro de body en el fichero welcome.blade.php y poner cualquier codigo html de Bootstrap 5, como por ejemplo un botón o culaquier elemento de este framework CSS.

Acerca del Autor

Met El Idrissi

Desarrollador web WordPress freelance y emprendedor tecnológico en aplicaciones web SaaS

Ver Artículos