Bootstrap y Vite

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

En esta página

¿Quieres saltar hasta el final? Descargue el código fuente y la demostración funcional de esta guía desde el repositorio twbs/examples . También puede abrir el ejemplo en StackBlitz para editarlo en vivo.

Configuración

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

Cree una carpeta de proyecto y configure npm. Crearemos la my-projectcarpeta e inicializaremos npm con el -yargumento 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 la herramienta de compilación. Solemos --save-devseñalar que esta dependencia es solo para uso de desarrollo y no para producción.
```
npm i --save-dev vite
```
Instalar Bootstrap. Ahora podemos instalar Bootstrap. También instalaremos Popper, ya que nuestros menús desplegables, popovers e información sobre herramientas dependen de ello para su posicionamiento. Si no planea usar esos componentes, puede omitir Popper aquí.
```
npm i --save bootstrap @popperjs/core
```
Instalar dependencia adicional. Además de Vite y Bootstrap, necesitamos otra dependencia (Sass) para importar y agrupar correctamente el CSS de Bootstrap.
```
npm i --save-dev sass
```

Ahora que tenemos todas las dependencias necesarias instaladas y configuradas, podemos comenzar a trabajar creando los archivos del proyecto e importando Bootstrap.

Estructura del proyecto

Ya creamos la my-projectcarpeta e inicializamos npm. Ahora también crearemos nuestra srccarpeta, hoja de estilo y archivo JavaScript para completar la estructura del proyecto. Ejecute lo siguiente desde my-projecto cree 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 haya terminado, su 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 codificar, ahora podemos configurar Vite y ejecutar nuestro proyecto localmente.

Abre vite.config.jsen tu editor. Como está en blanco, necesitaremos agregarle una configuración repetitiva para que podamos iniciar nuestro servidor. Esta parte de la configuración le dice a Vite que debe buscar el JavaScript de nuestro proyecto y cómo debe comportarse el servidor de desarrollo (extrayendo de la srccarpeta con recarga en caliente).
```
const path = require('path')

export default {
  root: path.resolve(__dirname, 'src'),
  server: {
    port: 8080,
    hot: true
  }
}
```

A continuación rellenamos src/index.html. Esta es la página HTML que Vite cargará en el navegador para utilizar el CSS y el JS incluidos que le 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>
  </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>
    <script type="module" src="./js/main.js"></script>
  </body>
</html>

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

Ahora necesitamos un script npm para ejecutar Vite. Abra package.jsony agregue el startscript que se muestra a continuación (ya debería tener el script de prueba). Usaremos este script para iniciar nuestro servidor de desarrollo Vite local.
```
{
  // ...
  "scripts": {
    "start": "vite",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
Y finalmente, podemos iniciar Vite. Desde la my-projectcarpeta en su terminal, ejecute 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

Configure la importación de Sass de Bootstrap en vite.config.js. Su archivo de configuración ahora está completo y debe coincidir con el fragmento a continuación. La única parte nueva aquí es la resolvesección: la usamos para agregar un alias a nuestros archivos de origen node_modulespara que las importaciones sean lo más simples posible.
```
const path = require('path')

export default {
  root: path.resolve(__dirname, 'src'),
  resolve: {
    alias: {
      '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'),
    }
  },
  server: {
    port: 8080,
    hot: true
  }
}
```
Ahora, importemos el CSS de Bootstrap. Agregue lo siguiente para src/scss/styles.scssimportar todo el Sass de origen de Bootstrap.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
También puede importar nuestras hojas de estilo individualmente si lo desea. Lea nuestros documentos de importación de Sass para obtener más detalles.
A continuación cargamos el CSS e importamos el JavaScript de Bootstrap. Agregue lo siguiente para src/js/main.jscargar 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 puede importar complementos de JavaScript individualmente según sea necesario para mantener bajos los tamaños de los paquetes:
```
import Alert from 'bootstrap/js/dist/alert';

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap';
```
Lea nuestros documentos de JavaScript para obtener más información sobre cómo usar los complementos de Bootstrap.
¡Y tu estas listo! 🎉 Con la fuente Sass y JS de Bootstrap completamente cargada, su servidor de desarrollo local ahora debería verse así.

Ahora puede comenzar a agregar cualquier componente de Bootstrap que desee usar. Asegúrese de consultar el proyecto de ejemplo completo de Vite para saber cómo incluir Sass personalizado adicional y optimizar su compilación importando solo las partes de CSS y JS de Bootstrap que necesita.

¿Ve algo incorrecto o desactualizado aquí? Abre una incidencia en GitHub . ¿Necesita ayuda para solucionar problemas? Busque o inicie una discusión en GitHub.