Bootstrap y Vite

La guía oficial sobre cómo incluir y empaquetar el CSS y JavaScript de Bootstrap en tu proyecto usando Vite.

En esta página

¿Quieres ir directamente al final? Descarga el código fuente y la demostración de trabajo para esta guía desde el repositorio twbs/examples. También puedes abrir el ejemplo en StackBlitz para edición en vivo.

¿Qué es Vite?

Vite es una herramienta de desarrollo frontend moderna diseñada para brindar velocidad y simplicidad. Proporciona una experiencia de desarrollo eficiente y optimizada, especialmente para los frameworks modernos de JavaScript.

Configuración

Estamos creando un proyecto Vite con Bootstrap desde cero, por lo que existen algunos prerrequisitos y pasos previos antes de que podamos comenzar. Esta guía requiere que tengas instalado Node.js y cierta familiaridad con la terminal.

Crea una carpeta de proyecto y configura npm. Crearemos la carpeta my-project e inicializaremos npm con el argumento -y para evitar que nos haga todas las preguntas interactivas.
```
mkdir my-project && cd my-project
npm init -y
```
Instala Vite. A diferencia de nuestra guía de Webpack, aquí solo hay una única dependencia de herramienta de compilación. Usamos --save-dev para indicar que esta dependencia es solo para uso de desarrollo y no para producción.
```
npm i --save-dev vite
```
Instala Bootstrap. Ahora podemos instalar Bootstrap. También instalaremos Popper ya que nuestros menús desplegables, popovers y tooltips dependen de él para su posicionamiento. Si no planeas usar esos componentes, puedes omitir Popper aquí.
```
npm i --save bootstrap @popperjs/core
```
Instala dependencias adicionales. Además de Vite y Bootstrap, necesitamos otra dependencia (Sass) para importar y empaquetar correctamente el CSS de Bootstrap.
```
npm i --save-dev sass
```

Now que tenemos todas las dependencias necesarias instaladas y configuradas, podemos ponernos a trabajar en la creación de los archivos del proyecto e importando Bootstrap.

Estructura del proyecto

Ya hemos creado la carpeta my-project e inicializado npm. Ahora también crearemos nuestra carpeta src, la hoja de estilo y el archivo JavaScript para completar la estructura del proyecto. Ejecuta lo siguiente desde my-project, o crea manualmente la estructura de carpetas y archivos que se muestra a continuación.

mkdir {src,src/js,src/scss}
touch src/index.html src/js/main.js src/scss/styles.scss vite.config.js

Cuando hayas terminado, tu proyecto completo debería verse así:

my-project/
├── src/
│   ├── js/
│   │   └── main.js
│   └── scss/
│   |   └── styles.scss
│   └── index.html
├── package-lock.json
├── package.json
└── vite.config.js

En este punto, todo está en el lugar correcto, pero Vite no funcionará porque aún no hemos completado nuestro vite.config.js.

Configurar Vite

Con las dependencias instaladas y nuestra carpeta de proyecto lista para que comencemos a programar, ahora podemos configurar Vite y ejecutar nuestro proyecto localmente.

Abre vite.config.js en tu editor. Dado que está en blanco, necesitaremos agregarle una configuración básica para poder iniciar nuestro servidor. Esta parte de la configuración le dice a Vite dónde buscar el JavaScript de nuestro proyecto y cómo debe comportarse el servidor de desarrollo (extrayendo de la carpeta src con recarga en caliente).
```
import { resolve } from 'path'

export default {
  root: resolve(__dirname, 'src'),
  build: {
    outDir: '../dist'
  },
  server: {
    port: 8080
  },
  // Opcional: Silenciar las advertencias de desaprobación de Sass. Consulta la nota a continuación.
  css: {
     preprocessorOptions: {
        scss: {
          silenceDeprecations: [
            'import',
            'mixed-decls',
            'color-functions',
            'global-builtin',
          ],
        },
     },
  },
}
```
Nota: Las advertencias de desaprobación de Sass se muestran al compilar archivos Sass de origen con las últimas versiones de Dart Sass. Esto no impide la compilación ni el uso de Bootstrap. Estamos trabajando en una solución a largo plazo, pero mientras tanto, estas advertencias de desaprobación se pueden ignorar.

A continuación, completamos src/index.html. Esta es la página HTML que Vite cargará en el navegador para utilizar el CSS y JS empaquetados que le agregaremos en pasos posteriores.

<!doctype html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap con Vite</title>
    <script type="module" src="./js/main.js"></script>
  </head>
  <body>
    <div class="container py-4 px-3 mx-auto">
      <h1>¡Hola, Bootstrap y Vite!</h1>
      <button class="btn btn-primary">Botón primario</button>
    </div>
  </body>
</html>

Estamos incluyendo un poco de estilo de Bootstrap aquí con el div class="container" y el <button> para que podamos ver cuándo Vite carga el CSS de Bootstrap.

Ahora necesitamos un script npm para ejecutar Vite. Abre package.json y agrega el script start que se muestra a continuación (ya deberías tener el script de prueba). Usaremos este script para iniciar nuestro servidor local de desarrollo de Vite.
```
{
  // ...
  "scripts": {
    "start": "vite",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
Y finalmente, podemos iniciar Vite. Desde la carpeta my-project en tu terminal, ejecuta ese script npm recién agregado:
```
npm start
```

En la siguiente y última sección de esta guía, importaremos todo el CSS y JavaScript de Bootstrap.

Importar Bootstrap

Importa el CSS de Bootstrap. Agrega lo siguiente a src/scss/styles.scss para importar todo el Sass de origen de Bootstrap.
```
// Importar todo el CSS de Bootstrap
@import "bootstrap/scss/bootstrap";
```
También puedes importar nuestras hojas de estilo individualmente si lo deseas. Lee nuestra documentación de importación de Sass para más detalles.
A continuación, cargamos el CSS e importamos el JavaScript de Bootstrap. Agrega lo siguiente a src/js/main.js para cargar el CSS e importar todo el JS de Bootstrap. Popper se importará automáticamente a través de Bootstrap.
```
// Importar nuestro CSS personalizado
import '../scss/styles.scss'

// Importar todo el JS de Bootstrap
import * as bootstrap from 'bootstrap'
```
También puedes importar plugins de JavaScript individualmente según sea necesario para mantener reducido el tamaño de los paquetes:
```
import Alert from 'bootstrap/js/dist/alert';

// o bien, especifica qué plugins necesitas:
import { Tooltip, Toast, Popover } from 'bootstrap';
```
Lee nuestra documentación de JavaScript para obtener más información sobre cómo usar los plugins de Bootstrap.
¡Y listo! 🎉 Con el Sass y JS fuente de Bootstrap completamente cargados, tu servidor de desarrollo local ahora debería verse así:

Ahora puedes comenzar a agregar los componentes de Bootstrap que quieras usar. Asegúrate de consultar el proyecto de ejemplo de Vite completo para saber cómo incluir Sass personalizado adicional y optimizar tu compilación importando solo las partes del CSS y JS de Bootstrap que necesites.

¿Ves algo incorrecto o desactualizado aquí? Por favor, abre un issue en GitHub. ¿Necesitas ayuda para solucionar problemas? Busca o inicia una discusión en GitHub.