Webpack

Leer hoe u Bootstrap in uw project kunt opnemen met Webpack.

Bootstrap installeren

Installeer bootstrap als een Node.js-module met npm.

JavaScript importeren

Importeer JavaScript van Bootstrap door deze regel toe te voegen aan het toegangspunt van uw app (meestal index.jsof app.js):

import 'bootstrap';

Als alternatief kunt u indien nodig plug-ins afzonderlijk importeren :

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

Bootstrap is afhankelijk van jQuery en Popper , die in de peerDependencieseigenschap worden gespecificeerd; dit betekent dat u ervoor moet zorgen dat u ze allebei aan uw package.jsongebruik toevoegt npm install --save jquery popper.js.

Stijlen importeren

Vooraf gecompileerde Sass importeren

Om het volledige potentieel van Bootstrap te benutten en het aan uw behoeften aan te passen, gebruikt u de bronbestanden als onderdeel van het bundelingsproces van uw project.

Maak eerst uw eigen variabelen en gebruik deze om de ingebouwde aangepaste variabelen_custom.scss te overschrijven . Gebruik vervolgens uw hoofd Sass-bestand om uw aangepaste variabelen te importeren, gevolgd door Bootstrap:

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

Om Bootstrap te compileren, moet u ervoor zorgen dat u de vereiste laders installeert en gebruikt: sass-loader , postcss-loader met Autoprefixer . Met minimale instellingen zou uw webpack-configuratie deze regel of iets dergelijks moeten bevatten:

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

Gecompileerde CSS importeren

Als alternatief kunt u de kant-en-klare CSS van Bootstrap gebruiken door simpelweg deze regel toe te voegen aan het startpunt van uw project:

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

In dit geval kunt u uw bestaande regel gebruiken csszonder speciale aanpassingen aan de webpack-configuratie, behalve dat u niet sass-loaderalleen style-loader en css-loader nodig heeft .

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