Bootstrap i Vite

La guia oficial sobre com incloure i agrupar CSS i JavaScript de Bootstrap al vostre projecte mitjançant Vite.

En aquesta pàgina

Vols saltar fins al final? Baixeu el codi font i la demostració de treball d'aquesta guia des del dipòsit twbs/examples . També podeu obrir l'exemple a StackBlitz per editar-lo en directe.

Configuració

Estem construint un projecte Vite amb Bootstrap des de zero, de manera que hi ha alguns requisits previs i passos inicials abans de poder començar realment. Aquesta guia requereix que tingueu instal·lat Node.js i una mica de familiaritat amb el terminal.

Creeu una carpeta de projecte i configureu npm. Crearem la my-projectcarpeta i inicialitzarem npm amb l' -yargument per evitar que ens faci totes les preguntes interactives.
```
mkdir my-project && cd my-project
npm init -y
```
Instal·leu Vite. A diferència de la nostra guia Webpack, aquí només hi ha una única dependència de l'eina de creació. Utilitzem --save-devper indicar que aquesta dependència només és per al desenvolupament i no per a la producció.
```
npm i --save-dev vite
```
Instal·leu Bootstrap. Ara podem instal·lar Bootstrap. També instal·larem Popper, ja que els nostres menús desplegables, finestres emergents i informació sobre eines en depenen per al seu posicionament. Si no teniu previst utilitzar aquests components, podeu ometre Popper aquí.
```
npm i --save bootstrap @popperjs/core
```
Instal·leu dependència addicional. A més de Vite i Bootstrap, necessitem una altra dependència (Sass) per importar i agrupar correctament el CSS de Bootstrap.
```
npm i --save-dev sass
```

Ara que tenim totes les dependències necessàries instal·lades i configurades, podem posar-nos a treballar creant els fitxers del projecte i important Bootstrap.

Estructura del projecte

Ja hem creat la my-projectcarpeta i hem inicialitzat npm. Ara també crearem la nostra srccarpeta, full d'estil i fitxer JavaScript per completar l'estructura del projecte. Executeu el següent des de my-project, o creeu manualment la carpeta i l'estructura de fitxers que es mostren a continuació.

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

Quan hàgiu acabat, el vostre projecte complet hauria de ser així:

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

En aquest moment, tot està al lloc correcte, però Vite no funcionarà perquè encara no hem omplert el nostre vite.config.js.

Configura Vite

Amb les dependències instal·lades i la nostra carpeta de projectes preparada perquè comencem a codificar, ara podem configurar Vite i executar el nostre projecte localment.

Obre vite.config.jsal teu editor. Com que està en blanc, haurem d'afegir-hi una configuració general perquè puguem iniciar el nostre servidor. Aquesta part de la configuració diu a Vite que hauria de buscar el JavaScript del nostre projecte i com hauria de comportar-se el servidor de desenvolupament (extraient de la srccarpeta amb la recàrrega en calent).
```
const path = require('path')

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

A continuació omplim src/index.html. Aquesta és la pàgina HTML que Vite carregarà al navegador per utilitzar el CSS i el JS que hi afegirem en passos posteriors.

<!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>

Estem inclòs una mica d'estil de Bootstrap aquí amb div class="container"i <button>perquè veiem quan Vite carrega el CSS de Bootstrap.

Ara necessitem un script npm per executar Vite. Obriu package.jsoni afegiu l' startscript que es mostra a continuació (ja hauríeu de tenir l'script de prova). Utilitzarem aquest script per iniciar el nostre servidor local de desenvolupament de Vite.
```
{
  // ...
  "scripts": {
    "start": "vite",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
I finalment, podem començar Vite. Des de la my-projectcarpeta del vostre terminal, executeu aquest nou script npm afegit:
```
npm start
```

A la següent i darrera secció d'aquesta guia, importarem tots els CSS i JavaScript de Bootstrap.

Importa Bootstrap

Configureu la importació Sass de Bootstrap a vite.config.js. El vostre fitxer de configuració s'ha completat i hauria de coincidir amb el fragment següent. L'única part nova aquí és la resolvesecció: la fem servir per afegir un àlies als nostres fitxers font node_modulesper mantenir les importacions el més senzilles possible.
```
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
  }
}
```
Ara, importem el CSS de Bootstrap. Afegiu el següent a src/scss/styles.scssper importar tot el Sass d'origen de Bootstrap.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
També podeu importar els nostres fulls d'estil individualment si voleu. Llegiu els nostres documents d'importació de Sass per obtenir més informació.
A continuació, carreguem el CSS i importem el JavaScript de Bootstrap. Afegiu el següent a src/js/main.jsper carregar el CSS i importar tots els JS de Bootstrap. Popper s'importarà automàticament mitjançant Bootstrap.
```
// Import our custom CSS
import '../scss/styles.scss'

// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
També podeu importar connectors de JavaScript individualment segons sigui necessari per reduir les mides dels paquets:
```
import Alert from 'bootstrap/js/dist/alert';

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap';
```
Llegiu els nostres documents de JavaScript per obtenir més informació sobre com utilitzar els connectors de Bootstrap.
I ja has acabat! 🎉 Amb la font Sass i JS de Bootstrap completament carregades, ara el vostre servidor de desenvolupament local hauria de tenir aquest aspecte.

Ara podeu començar a afegir qualsevol component Bootstrap que vulgueu utilitzar. Assegureu-vos de consultar el projecte d'exemple complet de Vite per saber com incloure Sass personalitzat addicional i optimitzar la vostra compilació important només les parts del CSS i JS de Bootstrap que necessiteu.

Veus alguna cosa malament o no actualitzada? Obriu un problema a GitHub . Necessites ajuda per resoldre problemes? Cerca o inicia una discussió a GitHub.