Preskočiť na hlavný obsah Preskočiť na navigáciu v dokumentoch
in English

Webpack a balíky

Zistite, ako zahrnúť Bootstrap do vášho projektu pomocou Webpacku alebo iných balíkov.

Inštalácia Bootstrap

Nainštalujte bootstrap ako modul Node.js pomocou npm.

Importuje sa JavaScript

Importujte JavaScript Bootstrapu pridaním tohto riadku do vstupného bodu vašej aplikácie (zvyčajne index.jsalebo app.js):

import 'bootstrap';

// or get all of the named exports for further usage
import * as bootstrap from 'bootstrap';

Prípadne, ak potrebujete len niekoľko našich doplnkov, môžete ich podľa potreby importovať jednotlivo :

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

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

Bootstrap závisí od Poppera , ktorý je špecifikovaný vo peerDependenciesvlastnosti. To znamená, že sa budete musieť uistiť, že ho pridáte do svojho package.jsonpoužívania npm install @popperjs/core.

Importovanie štýlov

Importuje sa predkompilovaný Sass

Ak chcete využiť plný potenciál Bootstrapu a prispôsobiť ho svojim potrebám, použite zdrojové súbory ako súčasť procesu spájania vášho projektu.

Najprv si vytvorte vlastnú _custom.scssa použite ju na prepísanie vstavaných vlastných premenných . Potom použite svoj hlavný súbor Sass na import vlastných premenných a potom Bootstrap:

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

Aby sa Bootstrap skompiloval, uistite sa, že ste nainštalovali a používali požadované zavádzače: sass- loader , postcss-loader s Autoprefixer . Pri minimálnom nastavení by vaša konfigurácia webového balíka mala obsahovať toto alebo podobné pravidlo:

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

Import kompilovaného CSS

Prípadne môžete použiť CSS pripravený na použitie Bootstrap jednoduchým pridaním tohto riadku do vstupného bodu vášho projektu:

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

V tomto prípade môžete použiť svoje existujúce pravidlo cssbez akýchkoľvek špeciálnych úprav konfigurácie webpacku, okrem toho, že nepotrebujete sass-loaderlen style-loader a css-loader .

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