Bootstrap & Vite

Den officiella guiden för hur du inkluderar och paketerar Bootstraps CSS och JavaScript i ditt projekt med hjälp av Vite.

På den här sidan

Vill du hoppa till slutet? Ladda ner källkoden och fungerande demo för den här guiden från twbs/exempelförrådet . Du kan också öppna exemplet i StackBlitz för liveredigering.

Uppstart

Vi bygger ett Vite-projekt med Bootstrap från grunden, så det finns några förutsättningar och steg framåt innan vi verkligen kan komma igång. Den här guiden kräver att du har Node.js installerat och att du känner till terminalen.

Skapa en projektmapp och ställ in npm. Vi skapar my-projectmappen och initierar npm med -yargumentet för att undvika att det ställer oss alla interaktiva frågor.
```
mkdir my-project && cd my-project
npm init -y
```
Installera Vite. Till skillnad från vår Webpack-guide finns det bara ett enda byggverktygsberoende här. Vi använder --save-devför att signalera att detta beroende endast är för utvecklingsanvändning och inte för produktion.
```
npm i --save-dev vite
```
Installera Bootstrap. Nu kan vi installera Bootstrap. Vi kommer också att installera Popper eftersom våra rullgardinsmenyer, popovers och verktygstips är beroende av den för deras placering. Om du inte planerar att använda dessa komponenter kan du utelämna Popper här.
```
npm i --save bootstrap @popperjs/core
```
Installera ytterligare beroende. Förutom Vite och Bootstrap behöver vi ytterligare ett beroende (Sass) för att korrekt importera och bunta Bootstraps CSS.
```
npm i --save-dev sass
```

Nu när vi har alla nödvändiga beroenden installerade och konfigurerade kan vi börja arbeta med att skapa projektfilerna och importera Bootstrap.

Projektets struktur

Vi har redan skapat my-projectmappen och initierat npm. Nu kommer vi också att skapa vår srcmapp, stilmall och JavaScript-fil för att avrunda projektstrukturen. Kör följande från my-project, eller skapa manuellt mapp- och filstrukturen som visas nedan.

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

När du är klar bör ditt kompletta projekt se ut så här:

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

Vid det här laget är allt på rätt plats, men Vite kommer inte att fungera eftersom vi inte har fyllt i vår vite.config.jsän.

Konfigurera Vite

Med beroenden installerade och vår projektmapp redo för oss att börja koda, kan vi nu konfigurera Vite och köra vårt projekt lokalt.

Öppna vite.config.jsi din editor. Eftersom den är tom, måste vi lägga till några boilerplate-konfigurationer till den så att vi kan starta vår server. Den här delen av konfigurationen säger att Vite skulle leta efter vårt projekts JavaScript och hur utvecklingsservern ska bete sig (dra från srcmappen med hot reload).
```
const path = require('path')

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

Därefter fyller vi i src/index.html. Det här är HTML-sidan Vite kommer att ladda i webbläsaren för att använda den medföljande CSS och JS som vi kommer att lägga till i senare steg.

<!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 inkluderar lite Bootstrap-styling här med div class="container"och <button>så att vi ser när Bootstraps CSS laddas av Vite.

Nu behöver vi ett npm-skript för att köra Vite. Öppna package.jsonoch lägg till startskriptet som visas nedan (du bör redan ha testskriptet). Vi kommer att använda det här skriptet för att starta vår lokala Vite-dev-server.
```
{
  // ...
  "scripts": {
    "start": "vite",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
Och äntligen kan vi starta Vite. Kör det nyligen tillagda npm-skriptet från my-projectmappen i din terminal:
```
npm start
```

I nästa och sista avsnitt i den här guiden kommer vi att importera alla Bootstraps CSS och JavaScript.

Importera Bootstrap

Ställ in Bootstraps Sass-import i vite.config.js. Din konfigurationsfil är nu klar och bör matcha kodavsnittet nedan. Den enda nya delen här är resolveavsnittet – vi använder detta för att lägga till ett alias till våra källfiler inuti node_modulesför att göra importen så enkel som möjligt.

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

Låt oss nu importera Bootstraps CSS. Lägg till följande för src/scss/styles.scssatt importera alla Bootstraps käll Sass.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Du kan även importera våra stilmallar individuellt om du vill. Läs våra Sass-importdokument för detaljer.
Därefter laddar vi CSS och importerar Bootstraps JavaScript. Lägg till följande för src/js/main.jsatt ladda CSS och importera alla Bootstraps JS. Popper kommer att importeras automatiskt via Bootstrap.
```
// Import our custom CSS
import '../scss/styles.scss'

// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
Du kan också importera JavaScript-plugins individuellt efter behov för att hålla nere paketstorlekar:
```
import Alert from 'bootstrap/js/dist/alert';

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap';
```
Läs våra JavaScript-dokument för mer information om hur du använder Bootstraps plugins.
Och du är klar! 🎉 Med Bootstraps källkod Sass och JS fulladdat bör din lokala utvecklingsserver nu se ut så här.

Nu kan du börja lägga till alla Bootstrap-komponenter du vill använda. Se till att kolla in det kompletta Vite-exempelprojektet för att inkludera ytterligare anpassade Sass och optimera din build genom att endast importera de delar av Bootstraps CSS och JS som du behöver.

Ser du något fel eller inaktuellt här? Öppna ett problem på GitHub . Behöver du hjälp med felsökning? Sök eller starta en diskussion på GitHub.