Webpack

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

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 , deze zijn gedefinieerd als peerDependencies, 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 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
    }]
  },
  ...

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