Webpaket

Erfahren Sie, wie Sie Bootstrap mit Webpack in Ihr Projekt einbinden.

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):

import 'bootstrap';

Alternativ können Sie Plugins nach Bedarf einzeln importieren:

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

Bootstrap hängt von jQuery und Popper ab , die in der peerDependenciesEigenschaft angegeben sind; Dies bedeutet, dass Sie sicherstellen müssen, dass Sie beide zu Ihrer package.jsonVerwendung hinzufügen npm install --save jquery popper.js.

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: [{
    loader: 'style-loader', // inject CSS to page
  }, {
    loader: 'css-loader', // translates CSS into CommonJS modules
  }, {
    loader: 'postcss-loader', // Run postcss actions
    options: {
      plugins: function () { // postcss plugins, can be exported to postcss.config.js
        return [
          require('autoprefixer')
        ];
      }
    }
  }, {
    loader: 'sass-loader' // compiles Sass to CSS
  }]
},
...

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