Webpack

Apprenez à inclure Bootstrap dans votre projet à l'aide de Webpack 3.

Installation de Bootstrap

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

Importation de JavaScript

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

import 'bootstrap';

Alternativement, vous pouvez importer des plugins individuellement selon vos besoins :

import 'bootstrap/js/dist/util';
import 'bootstrap/js/dist/dropdown';
...

Bootstrap dépend de jQuery et Popper , ceux-ci sont définis comme peerDependencies, cela signifie que vous devrez vous assurer de les ajouter tous les deux à votre package.jsonutilisation npm install --save jquery popper.js.

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 le vôtre _custom.scsset utilisez-le pour remplacer les variables personnalisées intégré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 doit inclure cette règle ou similaire :

  ...
  {
    test: /\.(scss)$/,
    use: [{
      loader: 'style-loader', // inject CSS to page
    }, {
      loader: 'css-loader', // translates CSS into CommonJS modules
    }, {
      loader: 'postcss-loader', // Run post css actions
      options: {
        plugins: function () { // post css plugins, can be exported to postcss.config.js
          return [
            require('precss'),
            require('autoprefixer')
          ];
        }
      }
    }, {
      loader: 'sass-loader' // compiles Sass to CSS
    }]
  },
  ...

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 csssans aucune modification particulière de la configuration de webpack, sauf que vous n'avez pas besoin sass-loaderuniquement de style-loader et de css-loader .

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