Bootstrap y Vite

La guía oficial para incluir y empaquetar el CSS y JavaScript de Bootstrap en tu proyecto usando Vite.

On this page

¿Quieres saltar al final? Descarga el código fuente y la demo funcional de 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 moderna de construcción de frontend diseñada para la velocidad y la simplicidad. Proporciona una experiencia de desarrollo eficiente y simplificada, especialmente para frameworks modernos de JavaScript.

Configuración

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

Crea una carpeta para el 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 en desarrollo y no para producción.
```
npm i --save-dev vite
```
Instala Bootstrap. Ahora podemos instalar Bootstrap. También instalaremos Popper ya que nuestros 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 una dependencia adicional. Además de Vite y Bootstrap, necesitamos otra dependencia (Sass) para importar y empaquetar correctamente el CSS de Bootstrap.
```
npm i --save-dev sass
```

Ahora que tenemos todas las dependencias necesarias instaladas y configuradas, podemos ponernos a trabajar creando 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, hoja de estilos y 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 termines, 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 su lugar, 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 empezar a programar, ahora podemos configurar Vite y ejecutar nuestro proyecto localmente.

Abre vite.config.js en tu editor. Como está vacío, necesitaremos agregarle alguna configuración base para poder iniciar nuestro servidor. Esta parte de la configuración le indica a Vite dónde buscar el JavaScript de nuestro proyecto y cómo debe comportarse el servidor de desarrollo (obteniendo los datos de la carpeta src con recarga en caliente).
```
import { resolve } from 'path'

export default {
  root: resolve(__dirname, 'src'),
  build: {
    outDir: '../dist'
  },
  server: {
    port: 8080
  },
  // Optional: Silence Sass deprecation warnings. See note below.
  css: {
     preprocessorOptions: {
        scss: {
          silenceDeprecations: [
            'import',
            'mixed-decls',
            'color-functions',
            'global-builtin',
          ],
        },
     },
  },
}
```
Nota: Se muestran advertencias de obsolescencia de Sass 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 obsolescencia pueden ignorarse.

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 agregaremos en pasos posteriores.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap w/ Vite</title>
    <script type="module" src="./js/main.js"></script>
  </head>
  <body>
    <div class="container py-4 px-3 mx-auto">
      <h1>Hello, Bootstrap and Vite!</h1>
      <button class="btn btn-primary">Primary button</button>
    </div>
  </body>
</html>

Estamos incluyendo un poco de estilo de Bootstrap aquí con el div class="container" y el <button> para que veamos cuando el CSS de Bootstrap es cargado por Vite.

Ahora necesitamos un script de npm para ejecutar Vite. Abre package.json y agrega el script start que se muestra a continuación (ya deberías tener el script test). Usaremos este script para iniciar nuestro servidor de desarrollo local 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 de npm recién añadido:
```
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. Añade lo siguiente a src/scss/styles.scss para importar todo el Sass fuente de Bootstrap.
```
// Import all of Bootstrap’s CSS
@import "bootstrap/scss/bootstrap";
```
También puedes import our stylesheets individually if you want. 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. Añade 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.
```
// Import our custom CSS
import '../scss/styles.scss'

// Import all of Bootstrap’s JS
import * as bootstrap from 'bootstrap'
```
También puedes importar los plugins de JavaScript individualmente según sea necesario para mantener los tamaños del bundle pequeños:
```
import Alert from 'bootstrap/js/dist/alert';

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap';
```
Lee nuestra documentación de JavaScript para más información sobre cómo usar los plugins de Bootstrap.
¡Y ya está! 🎉 Con el Sass y JS de origen de Bootstrap completamente cargados, tu servidor de desarrollo local debería verse así:

Ahora puedes empezar a añadir cualquier componente de Bootstrap que quieras usar. Asegúrate de revisar el proyecto de ejemplo completo de Vite para ver cómo incluir Sass personalizado adicional y optimizar tu compilación importando solo las partes del CSS y JS de Bootstrap que necesitas.

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