Bootstrap & Vite

Die offizielle Anleitung zum Einbinden und Bündeln von CSS und JavaScript von Bootstrap in Ihr Projekt mit Vite.

Auf dieser Seite

Willst du zum Ende springen? Laden Sie den Quellcode und die funktionierende Demo für dieses Handbuch aus dem twbs/examples-Repository herunter . Sie können das Beispiel auch in StackBlitz zur Live-Bearbeitung öffnen.

Konfiguration

Wir bauen ein Vite-Projekt mit Bootstrap von Grund auf neu auf, daher gibt es einige Voraussetzungen und Vorabschritte, bevor wir wirklich loslegen können. Für diese Anleitung müssen Sie Node.js installiert haben und mit dem Terminal vertraut sein.

Erstellen Sie einen Projektordner und richten Sie npm ein. Wir erstellen den my-projectOrdner und initialisieren npm mit dem -yArgument, um zu vermeiden, dass es uns alle interaktiven Fragen stellt.
```
mkdir my-project && cd my-project
npm init -y
```
Vite installieren. Im Gegensatz zu unserem Webpack-Leitfaden gibt es hier nur eine einzige Build-Tool-Abhängigkeit. Wir verwenden , um --save-devzu signalisieren, dass diese Abhängigkeit nur für Entwicklungszwecke und nicht für die Produktion ist.
```
npm i --save-dev vite
```
Bootstrap installieren. Jetzt können wir Bootstrap installieren. Wir werden auch Popper installieren, da unsere Dropdowns, Popovers und Tooltips für ihre Positionierung davon abhängen. Wenn Sie diese Komponenten nicht verwenden möchten, können Sie Popper hier weglassen.
```
npm i --save bootstrap @popperjs/core
```
Zusätzliche Abhängigkeit installieren. Zusätzlich zu Vite und Bootstrap benötigen wir eine weitere Abhängigkeit (Sass), um das CSS von Bootstrap richtig zu importieren und zu bündeln.
```
npm i --save-dev sass
```

Nachdem wir nun alle erforderlichen Abhängigkeiten installiert und eingerichtet haben, können wir uns an die Arbeit machen, die Projektdateien erstellen und Bootstrap importieren.

Projektstruktur

Wir haben den my-projectOrdner bereits erstellt und npm initialisiert. Jetzt erstellen wir auch unseren srcOrdner, unser Stylesheet und unsere JavaScript-Datei, um die Projektstruktur abzurunden. Führen Sie Folgendes aus my-projectoder erstellen Sie manuell die unten gezeigte Ordner- und Dateistruktur.

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

Wenn Sie fertig sind, sollte Ihr komplettes Projekt so aussehen:

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

An diesem Punkt ist alles an der richtigen Stelle, aber Vite funktioniert nicht, weil wir unsere vite.config.jsnoch nicht ausgefüllt haben.

Konfigurieren Sie Vite

Mit installierten Abhängigkeiten und unserem Projektordner, der bereit ist, mit dem Codieren zu beginnen, können wir jetzt Vite konfigurieren und unser Projekt lokal ausführen.

Öffnen vite.config.jsSie in Ihrem Editor. Da es leer ist, müssen wir ihm eine Boilerplate-Konfiguration hinzufügen, damit wir unseren Server starten können. Dieser Teil der Konfiguration teilt Vite mit, wo nach dem JavaScript unseres Projekts gesucht werden soll und wie sich der Entwicklungsserver verhalten soll (Pulling aus dem srcOrdner mit Hot Reload).
```
const path = require('path')

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

Als nächstes füllen wir aus src/index.html. Dies ist die HTML-Seite, die Vite im Browser lädt, um das gebündelte CSS und JS zu nutzen, das wir ihr in späteren Schritten hinzufügen werden.

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

Wir fügen hier ein bisschen Bootstrap-Styling mit div class="container"und ein <button>, damit wir sehen, wann Bootstrap-CSS von Vite geladen wird.

Jetzt brauchen wir ein npm-Skript, um Vite auszuführen. Öffnen Sie das unten gezeigte Skript package.jsonund fügen Sie es hinzu (Sie sollten bereits über das Testskript verfügen). startWir verwenden dieses Skript, um unseren lokalen Vite-Entwicklungsserver zu starten.
```
{
  // ...
  "scripts": {
    "start": "vite",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
Und endlich können wir Vite starten. Führen Sie im my-projectOrdner in Ihrem Terminal das neu hinzugefügte npm-Skript aus:
```
npm start
```

Im nächsten und letzten Abschnitt dieses Handbuchs importieren wir das gesamte CSS und JavaScript von Bootstrap.

Bootstrap importieren

Richten Sie den Sass-Import von Bootstrap in vite.config.js. Ihre Konfigurationsdatei ist jetzt vollständig und sollte mit dem folgenden Snippet übereinstimmen. Der einzige neue Teil hier ist der resolveAbschnitt – wir verwenden ihn, um unseren Quelldateien einen Alias hinzuzufügen node_modules, um den Import so einfach wie möglich zu halten.
```
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
  }
}
```
Lassen Sie uns nun das CSS von Bootstrap importieren. Fügen Sie Folgendes hinzu, src/scss/styles.scssum den gesamten Quell-Sass von Bootstrap zu importieren.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Auf Wunsch können Sie unsere Stylesheets auch einzeln importieren. Lesen Sie unsere Sass-Importdokumentation für Details.
Als nächstes laden wir das CSS und importieren das JavaScript von Bootstrap. Fügen Sie Folgendes hinzu, src/js/main.jsum das CSS zu laden und das gesamte JS von Bootstrap zu importieren. Popper wird automatisch über Bootstrap importiert.
```
// Import our custom CSS
import '../scss/styles.scss'

// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
Sie können JavaScript-Plug-ins nach Bedarf auch einzeln importieren, um die Bundle-Größen gering zu halten:
```
import Alert from 'bootstrap/js/dist/alert';

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap';
```
Lesen Sie unsere JavaScript -Dokumentation für weitere Informationen zur Verwendung der Plug-ins von Bootstrap.
Und du bist fertig! 🎉 Wenn Sass und JS von Bootstrap vollständig geladen sind, sollte Ihr lokaler Entwicklungsserver jetzt so aussehen.

Jetzt können Sie alle Bootstrap-Komponenten hinzufügen, die Sie verwenden möchten. Schauen Sie sich unbedingt das vollständige Vite-Beispielprojekt an, um zu erfahren, wie Sie zusätzliches benutzerdefiniertes Sass einbinden und Ihren Build optimieren können, indem Sie nur die Teile von Bootstrap CSS und JS importieren, die Sie benötigen.

Sehen Sie hier etwas falsch oder veraltet? Bitte öffnen Sie ein Issue auf GitHub . Benötigen Sie Hilfe bei der Fehlerbehebung? Suchen oder starten Sie eine Diskussion auf GitHub.