Bootstrap & Vite

Le guide officiel pour savoir comment inclure et regrouper les CSS et JavaScript de Bootstrap dans votre projet à l'aide de Vite.

Sur cette page

Vous voulez sauter à la fin ? Téléchargez le code source et la démonstration de travail de ce guide à partir du référentiel twbs/examples . Vous pouvez également ouvrir l'exemple dans StackBlitz pour l'édition en direct.

Installer

Nous construisons un projet Vite avec Bootstrap à partir de zéro, il y a donc des prérequis et des étapes préalables avant de pouvoir vraiment commencer. Ce guide nécessite que vous ayez installé Node.js et que vous soyez familiarisé avec le terminal.

Créez un dossier de projet et configurez npm. Nous allons créer le my-projectdossier et initialiser npm avec l' -yargument pour éviter qu'il ne nous pose toutes les questions interactives.
```
mkdir my-project && cd my-project
npm init -y
```
Installez Vite. Contrairement à notre guide Webpack, il n'y a qu'une seule dépendance d'outil de construction ici. Nous utilisons --save-devpour signaler que cette dépendance est uniquement destinée au développement et non à la production.
```
npm i --save-dev vite
```
Installez Bootstrap. Nous pouvons maintenant installer Bootstrap. Nous allons également installer Popper puisque nos listes déroulantes, popovers et infobulles en dépendent pour leur positionnement. Si vous ne prévoyez pas d'utiliser ces composants, vous pouvez omettre Popper ici.
```
npm i --save bootstrap @popperjs/core
```
Installez une dépendance supplémentaire. En plus de Vite et Bootstrap, nous avons besoin d'une autre dépendance (Sass) pour importer et regrouper correctement le CSS de Bootstrap.
```
npm i --save-dev sass
```

Maintenant que toutes les dépendances nécessaires sont installées et configurées, nous pouvons commencer à créer les fichiers de projet et à importer Bootstrap.

Structuration du projet

Nous avons déjà créé le my-projectdossier et initialisé npm. Maintenant, nous allons également créer notre srcdossier, notre feuille de style et notre fichier JavaScript pour compléter la structure du projet. Exécutez ce qui suit à partir de my-projectou créez manuellement la structure de dossiers et de fichiers indiquée ci-dessous.

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

Lorsque vous avez terminé, votre projet complet devrait ressembler à ceci :

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

À ce stade, tout est au bon endroit, mais Vite ne fonctionnera pas car nous n'avons pas vite.config.jsencore rempli le nôtre.

Configurer Vite

Avec les dépendances installées et notre dossier de projet prêt pour que nous commencions à coder, nous pouvons maintenant configurer Vite et exécuter notre projet localement.

Ouvrez vite.config.jsdans votre éditeur. Comme il est vide, nous devrons y ajouter une configuration passe-partout afin de pouvoir démarrer notre serveur. Cette partie de la configuration indique à Vite de rechercher le JavaScript de notre projet et comment le serveur de développement doit se comporter (extraire du srcdossier avec rechargement à chaud).
```
const path = require('path')

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

Ensuite, nous remplissons src/index.html. Il s'agit de la page HTML que Vite chargera dans le navigateur pour utiliser le CSS et le JS fournis que nous y ajouterons dans les étapes ultérieures.

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

Nous incluons ici un peu de style Bootstrap avec le div class="container"et <button>pour que nous puissions voir quand le CSS de Bootstrap est chargé par Vite.

Nous avons maintenant besoin d'un script npm pour exécuter Vite. Ouvrez package.jsonet ajoutez le startscript ci-dessous (vous devriez déjà avoir le script de test). Nous utiliserons ce script pour démarrer notre serveur de développement Vite local.
```
{
  // ...
  "scripts": {
    "start": "vite",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
Et enfin, nous pouvons commencer Vite. Depuis le my-projectdossier de votre terminal, exécutez ce script npm nouvellement ajouté :
```
npm start
```

Dans la prochaine et dernière section de ce guide, nous importerons tous les CSS et JavaScript de Bootstrap.

Importer le bootstrap

Configurez l'importation Sass de Bootstrap dans vite.config.js. Votre fichier de configuration est maintenant terminé et doit correspondre à l'extrait ci-dessous. La seule nouvelle partie ici est la resolvesection - nous l'utilisons pour ajouter un alias à nos fichiers source à l'intérieur node_modulesafin de garder les importations aussi simples que 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
  }
}
```
Maintenant, importons le CSS de Bootstrap. Ajoutez ce qui suit pour src/scss/styles.scssimporter toutes les sources Sass de Bootstrap.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Vous pouvez également importer nos feuilles de style individuellement si vous le souhaitez. Lisez nos documents d'importation Sass pour plus de détails.
Ensuite, nous chargeons le CSS et importons le JavaScript de Bootstrap. Ajoutez ce qui suit pour src/js/main.jscharger le CSS et importer tout le JS de Bootstrap. Popper sera importé automatiquement via Bootstrap.
```
// Import our custom CSS
import '../scss/styles.scss'

// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
Vous pouvez également importer des plugins JavaScript individuellement selon vos besoins pour limiter la taille des bundles :
```
import Alert from 'bootstrap/js/dist/alert';

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap';
```
Lisez nos documents JavaScript pour plus d'informations sur l'utilisation des plugins de Bootstrap.
Et tu as fini! 🎉 Avec les sources Sass et JS de Bootstrap entièrement chargées, votre serveur de développement local devrait maintenant ressembler à ceci.

Vous pouvez maintenant commencer à ajouter tous les composants Bootstrap que vous souhaitez utiliser. Assurez-vous de consulter l'exemple de projet Vite complet pour savoir comment inclure des Sass personnalisés supplémentaires et optimiser votre build en important uniquement les parties du CSS et du JS de Bootstrap dont vous avez besoin.

Vous voyez quelque chose d'erroné ou d'obsolète ici ? Veuillez ouvrir un problème sur GitHub . Besoin d'aide pour le dépannage ? Recherchez ou démarrez une discussion sur GitHub.