1. Instalar Bootstrap 5 y sus dependencias
Para instalar Bootstrap desde la terminal de comandos ejecuta las siguientes instrucciones
npm i bootstrap sass @popperjs/core –save-dev
2. Configurar Vite y dependencias
Cambia el nombre del archivo: resources/css/app.css por: resources/css/app.scss
Abre el archivo vite.config.js que se encuentra en la raíz del proyecto y cambia la referencia resources/css/app.css por resources/css/app.scss
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({
plugins: [
laravel({
input: ['resources/css/app.scss', 'resources/js/app.js'],
refresh: true,
}),
],
});
En el archivo resources/css/app.scss importa Bootstrap agregando la siguiente línea de código
@import 'bootstrap/scss/bootstrap';
En el archivo resources/js/bootstrap.js añadir siguiente lineas
...
import * as Popper from '@popperjs/core'
window.Popper = Popper
import 'bootstrap'
...
3. Cambiar .blade para Hot reloading
En el archivo resources/views/welcome.blade.php pega el siguiente código antes de cierre de tag <head>:
...
@vite(['resources/js/app.js', 'resources/css/app.scss'])
</head>
<body>
...
4. Probar
Ejecuta dev server con comando:
npm run dev
1. Install Bootstrap 5 and dependencies
To install Bootstrap from the command terminal execute the following instructions
npm i bootstrap sass @popperjs/core –save-dev
2. Configure Vite and dependencies
Rename the file: resources/css/app.css to: resources/css/app.scss
Open the vite.config.js file found in the root of the project and change the reference resources/css/app.css to resources/css/app.scss
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({
plugins: [
laravel({
input: ['resources/css/app.scss', 'resources/js/app.js'],
refresh: true,
}),
],
});
In the resources/css/app.scss file import Bootstrap by adding the following line of code
@import 'bootstrap/scss/bootstrap';
In the file resources/js/bootstrap.js add the following lines
...
import * as Popper from '@popperjs/core'
window.Popper = Popper
import 'bootstrap'
...
3. Change .blade for Hot reloading
In the resources/views/welcome.blade.php file, paste the following code before the closing <head> tag:
...
@vite(['resources/js/app.js', 'resources/css/app.scss'])
</head>
<body>
...
4. Test
Run dev server with command:
npm run dev
