Webpack

Lär dig hur du inkluderar Bootstrap i ditt projekt med Webpack 3.

Installerar Bootstrap

Installera bootstrap som en Node.js-modul med npm.

Importera JavaScript

Importera Bootstraps JavaScript genom att lägga till den här raden till appens ingångspunkt (vanligtvis index.jseller app.js):

import 'bootstrap';

Alternativt kan du importera plugins individuellt efter behov:

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

Bootstrap är beroende av jQuery och Popper , dessa definieras som peerDependencies, detta betyder att du måste se till att lägga till båda i din package.jsonanvändning npm install --save jquery popper.js.

Importera stilar

Importera förkompilerad Sass

För att dra nytta av Bootstraps fulla potential och anpassa den efter dina behov, använd källfilerna som en del av ditt projekts paketeringsprocess.

Skapa först din egen _custom.scssoch använd den för att åsidosätta de inbyggda anpassade variablerna . Använd sedan din Sass-huvudfil för att importera dina anpassade variabler, följt av Bootstrap:

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

För att Bootstrap ska kompileras, se till att du installerar och använder de nödvändiga laddarna: sass-loader , postcss-loader med Autoprefixer . Med minimal konfiguration bör din webbpaketskonfiguration innehålla denna regel eller liknande:

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

Importerar kompilerad CSS

Alternativt kan du använda Bootstraps färdiga CSS genom att helt enkelt lägga till den här raden till ditt projekts startpunkt:

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

I det här fallet kan du använda din befintliga regel cssutan några speciella modifieringar av webpack-konfiguration, förutom att du inte sass-loaderbara behöver style-loader och css-loader .

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