Integrar Bootstrap en Laravel 11

En esta guía aprenderás cómo integrar cualquier versión de Bootstrap en tu proyecto Laravel 11 aprovechando la potencia de Vite para compilar tus archivos. Además, veremos cómo crear un archivo SCSS propio para sobrescribir variables de Bootstrap y así personalizar el framework según tus necesidades.

1. Requisitos previos

• Tener instalado Node.js y npm (o yarn si lo prefieres).

• Un proyecto de Laravel 11 recién instalado o ya en funcionamiento.

• Conocimientos básicos de Sass y de la estructura de archivos en Laravel.

2. Instalar Bootstrap y Sass

Primero, instalaremos las dependencias necesarias: Bootstrap, sass, y sass-loader (o en su defecto, la parte de compilers de Vite que gestione Sass).

npm install bootstrap sass

3. Estructura de directorios y configuración inicial

En un proyecto estándar de Laravel 11 con Vite, la estructura base para los archivos de front-end se encuentra en la carpeta:

/resources/
  ├── css
  ├── js
  └── scss

Si no existe la carpeta scss dentro de resources, puedes crearla:

mkdir resources/scss

4. Sobrescribir variables de Bootstrap en un archivo SCSS personalizado

4.1 Crear tu archivo SCSS

Dentro de la carpeta resources/scss, crea un archivo llamado, por ejemplo, app.scss. La idea es usar este archivo para incluir Bootstrap y sobrescribir variables.

4.2 Configurar el alias de Bootstrap en vite.config.js

Para que las importaciones funcionen de manera más limpia (especialmente cuando personalizamos rutas o queremos usar “alias”), podemos configurar un alias en nuestro vite.config.js (ubicado en la raíz del proyecto Laravel).

Con este alias, cada vez que en un archivo SCSS coloquemos @import "bootstrap/scss/bootstrap";, se dirigirá directamente a la ruta de bootstrap dentro de node_modules.

5. Importar los assets en tu Blade

En tu plantilla principal (por ejemplo, resources/views/layouts/app.blade.php), utiliza la directiva @vite para indicar los archivos de entrada configurados en vite.config.js:

6. Compilación y prueba

Para compilar tus assets, ejecuta en consola:

npm run dev

Esto levantará el servidor de Vite en modo desarrollo. Para compilar para producción:

npm run build

Una vez finalizado, confirma que en tu navegador se aplique el estilo personalizado (en este caso, el color primario y el fondo que definimos en nuestro SCSS).

7. Conclusión

¡Y eso es todo! Ya tienes Bootstrap integrado con Laravel 11 y Vite, personalizando las variables desde un archivo SCSS personalizado. A partir de aquí, puedes seguir explorando más variables que ofrece Bootstrap para dejar tu proyecto completamente a tu gusto.

¿Ya has integrado Bootstrap en tus proyectos Laravel? ¡Comparte esta entrada con tus colegas y no olvides explorar la Ruta de Aprendizaje Laravel 11!