Webpaket

Erfahren Sie, wie Sie Bootstrap mit Webpack 3 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 ist abhängig von jQuery und Popper , diese sind definiert als peerDependencies, das bedeutet , dass Sie sicherstellen müssen , beide zu Ihrer package.jsonVerwendung hinzuzufü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 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
    }]
  },
  ...

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