Webpack und Bundler

Bootstrap installieren

Installieren Sie Bootstrap als Node.js-Modul mit npm.

JavaScript importieren

Importieren Sie das JavaScript von Bootstrap, indem Sie diese Zeile zum Einstiegspunkt Ihrer App hinzufügen (normalerweise index.jsoder app.js):

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

Wenn Sie nur einige unserer Plugins benötigen, können Sie alternativ Plugins nach Bedarf einzeln importieren :

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

Bootstrap hängt von Popper ab , das in der peerDependenciesEigenschaft angegeben ist. Dies bedeutet, dass Sie sicherstellen müssen, dass Sie es zu Ihrer package.jsonVerwendung hinzufügen npm install @popperjs/core.

Stile importieren

Importieren von vorkompiliertem Sass

Um das volle Potenzial von Bootstrap auszuschöpfen und es an Ihre Bedürfnisse anzupassen, verwenden Sie die Quelldateien als Teil des Bündelungsprozesses Ihres Projekts.

Erstellen Sie zuerst Ihre eigene und verwenden Sie sie, um die integrierten benutzerdefinierten Variablen_custom.scss zu überschreiben . Verwenden Sie dann Ihre Haupt-Sass-Datei, um Ihre benutzerdefinierten Variablen zu importieren, gefolgt von Bootstrap:

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

Stellen Sie zum Kompilieren von Bootstrap sicher, dass Sie die erforderlichen Ladeprogramme installieren und verwenden: sass-loader , postcss-loader with Autoprefixer . Bei minimaler Einrichtung sollte Ihre Webpack-Konfiguration diese oder eine ähnliche Regel enthalten:

// ...
{
  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'
  }]
}
// ...

Kompiliertes CSS importieren

Alternativ können Sie das gebrauchsfertige CSS von Bootstrap verwenden, indem Sie einfach diese Zeile zum Einstiegspunkt Ihres Projekts hinzufügen:

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

In diesem Fall können Sie Ihre bestehende Regel cssohne spezielle Änderungen an der Webpack-Konfiguration verwenden, außer dass Sie nicht sass-loadernur style-loader und css-loader benötigen .

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