Installation de Bootstrap

Install bootstrap en tant que module Node.js à l'aide de npm.

Importation de JavaScript

Importez JavaScript Bootstrap en ajoutant cette ligne au point d'entrée de votre application (généralement index.js ou app.js) :

// You can specify which plugins you need
import { Tooltip, Toast, Popover } from 'bootstrap';

Alternatively, if you only need just a few of our plugins, you may import plugins individually as needed:

import Alert from 'bootstrap/js/dist/alert';
...

Bootstrap dépend de Popper, qui est spécifié dans la propriété peerDependencies. Cela signifie que vous devrez vous assurer de l'ajouter à votre package.json en utilisant npm install @popperjs/core.

Importation de Styles

Importation de Sass précompilé

Pour profiter pleinement du potentiel de Bootstrap et le personnaliser selon vos besoins, utilisez les fichiers source dans le cadre du processus de regroupement de votre projet.

Tout d'abord, créez votre propre _custom.scss et utilisez-le pour remplacer le built- dans les variables personnalisées. Ensuite, utilisez votre fichier Sass principal pour importer vos variables personnalisées, suivi de Bootstrap :

@import "custom";
@import "~bootstrap/scss/bootstrap";

Pour que Bootstrap compile, assurez-vous d'installer et d'utiliser les chargeurs requis : sass-loader, postcss-loader avec Autoprefixer. Avec une configuration minimale, votre configuration Webpack devrait inclure cette règle ou similaire :

// ...
{
  test: /\.(scss)$/,
  use: [{
    // inject CSS to page
    loader: 'style-loader'
  }, {
    // translates CSS into CommonJS modules
    loader: 'css-loader'
  }, {
    // Run postcss actions
    loader: 'postcss-loader',
    options: {
      // `postcssOptions` is needed for postcss 8.x;
      // if you use postcss 7.x skip the key
      postcssOptions: {
        // postcss plugins, can be exported to postcss.config.js
        plugins: function () {
          return [
            require('autoprefixer')
          ];
        }
      }
    }
  }, {
    // compiles Sass to CSS
    loader: 'sass-loader'
  }]
}
// ...

Importation de CSS compilé

Alternativement, vous pouvez utiliser le CSS prêt à l'emploi de Bootstrap en ajoutant simplement cette ligne au point d'entrée de votre projet :

import 'bootstrap/dist/css/bootstrap.min.css';

Dans ce cas, vous pouvez utiliser votre règle existante pour css sans aucune modification particulière de la configuration du pack Web, sauf que vous n'avez pas besoin de sass-loader juste style-loader et css- chargeur.

// ...
module: {
  rules: [
    {
      test: /\.css$/,
      use: [
        'style-loader',
        'css-loader'
      ]
    }
  ]
}
// ...