Bootstrap e Vite

A guía oficial de como incluír e agrupar CSS e JavaScript de Bootstrap no teu proxecto usando Vite.

Nesta páxina

Queres saltar ata o final? Descarga o código fonte e a demostración de traballo desta guía desde o repositorio twbs/examples . Tamén podes abrir o exemplo en StackBlitz para a edición en directo.

Montar

Estamos construíndo un proxecto de Vite con Bootstrap desde cero, polo que hai algúns requisitos previos e pasos previos antes de poder comezar realmente. Esta guía require que teñas instalado Node.js e algo de familiaridade co terminal.

Crea un cartafol do proxecto e configura npm. Crearemos o my-projectcartafol e inicializaremos npm co -yargumento para evitar que nos faga todas as preguntas interactivas.
```
mkdir my-project && cd my-project
npm init -y
```
Instalar Vite. A diferenza da nosa guía Webpack, aquí só hai unha única dependencia da ferramenta de compilación. Usamos --save-devpara sinalar que esta dependencia é só para o desenvolvemento e non para a produción.
```
npm i --save-dev vite
```
Instalar Bootstrap. Agora podemos instalar Bootstrap. Tamén instalaremos Popper xa que os nosos menús despregables, popovers e informacións sobre ferramentas dependen del para o seu posicionamento. Se non pensas usar eses compoñentes, podes omitir Popper aquí.
```
npm i --save bootstrap @popperjs/core
```
Instalar dependencia adicional. Ademais de Vite e Bootstrap, necesitamos outra dependencia (Sass) para importar e agrupar correctamente o CSS de Bootstrap.
```
npm i --save-dev sass
```

Agora que temos todas as dependencias necesarias instaladas e configuradas, podemos poñernos a traballar creando os ficheiros do proxecto e importando Bootstrap.

Estrutura do proxecto

Xa creamos o my-projectcartafol e inicializamos npm. Agora tamén crearemos o noso srccartafol, folla de estilo e ficheiro JavaScript para completar a estrutura do proxecto. Executa o seguinte desde my-project, ou crea manualmente o cartafol e a estrutura de ficheiros que se mostran a continuación.

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

Cando remates, o teu proxecto completo debería verse así:

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

Neste momento, todo está no lugar correcto, pero Vite non funcionará porque aínda non cubrimos o noso vite.config.js.

Configura Vite

Con dependencias instaladas e o noso cartafol do proxecto preparado para que comecemos a codificar, agora podemos configurar Vite e executar o noso proxecto localmente.

Abre vite.config.jsno teu editor. Xa que está en branco, necesitaremos engadirlle algunha configuración estándar para que poidamos iniciar o noso servidor. Esta parte da configuración indica que Vite debe buscar o JavaScript do noso proxecto e como debería comportarse o servidor de desenvolvemento (tirando do srccartafol con recarga en quente).
```
const path = require('path')

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

A continuación enchemos src/index.html. Esta é a páxina HTML que Vite cargará no navegador para utilizar o paquete CSS e JS que engadiremos a ela 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>

Incluimos aquí un pouco de estilo Bootstrap co div class="container"e <button>para que vexamos cando Vite carga o CSS de Bootstrap.

Agora necesitamos un script npm para executar Vite. Abre package.jsone engade o startscript que se mostra a continuación (xa deberías ter o script de proba). Usaremos este script para iniciar o noso servidor local de desenvolvemento de Vite.
```
{
  // ...
  "scripts": {
    "start": "vite",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
E por último, podemos comezar Vite. Desde o my-projectcartafol do teu terminal, executa ese script npm recén engadido:
```
npm start
```

Na seguinte e última sección desta guía, importaremos todos os CSS e JavaScript de Bootstrap.

Importar Bootstrap

Configura a importación Sass de Bootstrap en vite.config.js. O teu ficheiro de configuración xa está completo e debería coincidir co seguinte fragmento. A única parte nova aquí é a resolvesección: usamos esta para engadir un alias aos nosos ficheiros de orixe node_modulespara que as importacións sexan o máis sinxelas 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
  }
}
```
Agora, imos importar o CSS de Bootstrap. Engade o seguinte a src/scss/styles.scsspara importar toda a fonte Sass de Bootstrap.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Tamén podes importar as nosas follas de estilo individualmente se queres. Lea os nosos documentos de importación de Sass para obter máis detalles.
A continuación cargamos o CSS e importamos o JavaScript de Bootstrap. Engade o seguinte a src/js/main.jspara cargar o CSS e importar todos os JS de Bootstrap. Popper importarase automaticamente a través de Bootstrap.
```
// Import our custom CSS
import '../scss/styles.scss'

// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
Tamén pode importar complementos de JavaScript individualmente segundo sexa necesario para reducir o tamaño dos paquetes:
```
import Alert from 'bootstrap/js/dist/alert';

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap';
```
Lea os nosos documentos de JavaScript para obter máis información sobre como usar os complementos de Bootstrap.
E xa estás! 🎉 Co Sass e JS de orixe de Bootstrap cargados completamente, o teu servidor de desenvolvemento local debería verse así.

Agora podes comezar a engadir calquera compoñentes de Bootstrap que queiras usar. Asegúrate de consultar o proxecto completo de exemplo de Vite para saber como incluír Sass personalizado adicional e optimizar a túa compilación importando só as partes do CSS e JS de Bootstrap que necesites.

Ves algo incorrecto ou desactualizado aquí? Abre un problema en GitHub . Necesitas axuda para solucionar problemas? Busca ou inicia unha discusión en GitHub.