Webpack och buntare

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

// You can specify which plugins you need
import { Tooltip, Toast, Popover } from 'bootstrap';

Alternativt, om du bara behöver några av våra plugins, kan du importera plugins individuellt efter behov:

import Alert from 'bootstrap/js/dist/alert';
...

Bootstrap beror på Popper , som anges i peerDependenciesegenskapen. Det betyder att du måste se till att lägga till den i din package.jsonanvändning npm install @popperjs/core.

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: [{
    // inject CSS to page
    loader: 'style-loader'
  }, {
    // translates CSS into CommonJS modules
    loader: 'css-loader'
  }, {
    // Run postcss actions
    loader: 'postcss-loader',
    options: {
      // `postcssOptions` is needed for postcss 8.x;
      // if you use postcss 7.x skip the key
      postcssOptions: {
        // postcss plugins, can be exported to postcss.config.js
        plugins: function () {
          return [
            require('autoprefixer')
          ];
        }
      }
    }
  }, {
    // compiles Sass to CSS
    loader: 'sass-loader'
  }]
}
// ...

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