Webpack a Bundles

Installéiert Bootstrap

Installéiert Bootstrap als Node.js Modul mat npm.

JavaScript importéieren

Importéiert Bootstrap's JavaScript andeems Dir dës Linn op den Entréespunkt vun Ärer App bäidréit (normalerweis index.jsoder app.js):

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

Alternativ, wann Dir nëmmen e puer vun eise Plugins braucht, kënnt Dir Plugins individuell importéieren wéi néideg:

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

Bootstrap hänkt vum Popper of , deen an der peerDependenciesImmobilie spezifizéiert ass. Dëst bedeit datt Dir sécher musst suerge fir et op Äre package.jsonGebrauch ze addéieren npm install @popperjs/core.

Stiler importéieren

Prekompiléiert Sass importéieren

Fir dat vollt Potenzial vu Bootstrap ze genéissen an et op Är Bedierfnesser ze personaliséieren, benotzt d'Quelldateien als Deel vum Bündelprozess vun Ärem Projet.

Als éischt, erstellt Är eege _custom.scssa benotzt se fir déi agebaute personaliséiert Variablen ze iwwerschreiden . Dann benotzt Är Haapt Sass Datei fir Är personaliséiert Variabelen z'importéieren, gefollegt vu Bootstrap:

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

Fir Bootstrap ze kompiléieren, gitt sécher datt Dir déi erfuerderlech Loader installéiert a benotzt: sass-loader , postcss-loader mat Autoprefixer . Mat minimale Setup sollt Är Webpack Konfiguratioun dës Regel oder ähnlech enthalen:

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

Kompiléiert CSS importéieren

Alternativ kënnt Dir Bootstrap's prett-ze-benotzen CSS benotzen andeems Dir dës Linn einfach op den Entréespunkt vun Ärem Projet bäidréit:

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

An dësem Fall kënnt Dir Är existent Regel benotze fir cssouni speziell Ännerunge fir Webpack Config, ausser Dir braucht net sass-loaderjust Style-loader an css-loader .

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