Bootstrap & Vite

Den offisielle veiledningen for hvordan du inkluderer og pakker Bootstraps CSS og JavaScript i prosjektet ditt ved hjelp av Vite.

På denne siden

Vil du hoppe til slutten? Last ned kildekoden og arbeidsdemoen for denne veiledningen fra twbs/eksempel-depotet . Du kan også åpne eksemplet i StackBlitz for live redigering.

Oppsett

Vi bygger et Vite-prosjekt med Bootstrap fra bunnen av, så det er noen forutsetninger og fremgangsmåter før vi virkelig kan komme i gang. Denne veiledningen krever at du har Node.js installert og litt kjennskap til terminalen.

Opprett en prosjektmappe og sett opp npm. Vi oppretter my-projectmappen og initialiserer npm med -yargumentet for å unngå at det stiller oss alle de interaktive spørsmålene.
```
mkdir my-project && cd my-project
npm init -y
```
Installer Vite. I motsetning til vår Webpack-guide, er det bare en enkelt byggeverktøyavhengig her. Vi bruker --save-devå signalisere at denne avhengigheten kun er for utviklingsbruk og ikke for produksjon.
```
npm i --save-dev vite
```
Installer Bootstrap. Nå kan vi installere Bootstrap. Vi vil også installere Popper siden rullegardinlistene, popovers og verktøytipsene våre avhenger av den for deres plassering. Hvis du ikke planlegger å bruke disse komponentene, kan du utelate Popper her.
```
npm i --save bootstrap @popperjs/core
```
Installer ekstra avhengighet. I tillegg til Vite og Bootstrap, trenger vi en annen avhengighet (Sass) for å importere og pakke Bootstraps CSS på riktig måte.
```
npm i --save-dev sass
```

Nå som vi har alle nødvendige avhengigheter installert og oppsett, kan vi begynne å jobbe med å lage prosjektfilene og importere Bootstrap.

Prosjektstruktur

Vi har allerede opprettet my-projectmappen og initialisert npm. Nå skal vi også lage srcmappen, stilarket og JavaScript-filen vår for å avrunde prosjektstrukturen. Kjør følgende fra my-project, eller lag mappen og filstrukturen som vises nedenfor manuelt.

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

Når du er ferdig, skal hele prosjektet ditt se slik ut:

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

På dette tidspunktet er alt på rett plass, men Vite vil ikke fungere fordi vi ikke har fylt ut vår vite.config.jsennå.

Konfigurer Vite

Med avhengigheter installert og prosjektmappen vår klar til at vi kan begynne kodingen, kan vi nå konfigurere Vite og kjøre prosjektet vårt lokalt.

Åpne vite.config.jsi redigeringsprogrammet. Siden den er tom, må vi legge til noen boilerplate-konfigurasjon til den slik at vi kan starte serveren vår. Denne delen av konfigurasjonen forteller at Vite skulle se etter prosjektets JavaScript og hvordan utviklingsserveren skal oppføre seg (trekker fra srcmappen med hot reload).
```
const path = require('path')

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

Deretter fyller vi ut src/index.html. Dette er HTML-siden Vite vil laste inn i nettleseren for å bruke den medfølgende CSS og JS vi legger til i senere trinn.

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

Vi inkluderer litt Bootstrap-styling her med div class="container"og <button>slik at vi ser når Bootstraps CSS lastes inn av Vite.

Nå trenger vi et npm-skript for å kjøre Vite. Åpne package.jsonog legg til startskriptet vist nedenfor (du bør allerede ha testskriptet). Vi bruker dette skriptet til å starte vår lokale Vite-utviklerserver.
```
{
  // ...
  "scripts": {
    "start": "vite",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
Og endelig kan vi starte Vite. Fra my-projectmappen i terminalen din, kjør det nylig lagt til npm-skriptet:
```
npm start
```

I den neste og siste delen av denne veiledningen vil vi importere alle Bootstraps CSS og JavaScript.

Importer Bootstrap

Sett opp Bootstraps Sass-import i vite.config.js. Konfigurasjonsfilen din er nå fullført og skal samsvare med kodebiten nedenfor. Den eneste nye delen her er resolvedelen – vi bruker denne til å legge til et alias til kildefilene våre på innsiden node_modulesfor å gjøre importen så enkel som mulig.
```
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
  }
}
```
La oss nå importere Bootstraps CSS. Legg til følgende for src/scss/styles.scsså importere hele Bootstraps kilde Sass.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Du kan også importere stilarkene våre individuelt hvis du vil. Les våre Sass-importdokumenter for detaljer.
Deretter laster vi inn CSS og importerer Bootstraps JavaScript. Legg til følgende for src/js/main.jså laste CSS og importere alle Bootstraps JS. Popper vil bli importert automatisk gjennom Bootstrap.
```
// Import our custom CSS
import '../scss/styles.scss'

// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
Du kan også importere JavaScript-plugins individuelt etter behov for å holde pakkestørrelsene nede:
```
import Alert from 'bootstrap/js/dist/alert';

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap';
```
Les våre JavaScript-dokumenter for mer informasjon om hvordan du bruker Bootstraps plugins.
Og du er ferdig! 🎉 Med Bootstraps kilde Sass og JS fullastet, skal din lokale utviklingsserver nå se slik ut.

Nå kan du begynne å legge til alle Bootstrap-komponenter du vil bruke. Sørg for å sjekke ut det komplette Vite-eksempelprosjektet for hvordan du inkluderer ekstra tilpasset Sass og optimaliserer bygget ved å importere bare delene av Bootstraps CSS og JS du trenger.

Ser du noe galt eller utdatert her? Vennligst åpne et problem på GitHub . Trenger du hjelp til feilsøking? Søk eller start en diskusjon på GitHub.