Webpack

Zistite, ako zahrnúť Bootstrap do vášho projektu pomocou Webpack.

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';

Prípadne môžete podľa potreby importovať doplnky jednotlivo :

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

Bootstrap je závislý na jQuery a Popper , tieto sú definované ako peerDependencies, to znamená, že budete musieť pridať obe do svojho package.jsonpoužívania npm install --save jquery popper.js.

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: [{
    loader: 'style-loader', // inject CSS to page
  }, {
    loader: 'css-loader', // translates CSS into CommonJS modules
  }, {
    loader: 'postcss-loader', // Run postcss actions
    options: {
      plugins: function () { // postcss plugins, can be exported to postcss.config.js
        return [
          require('autoprefixer')
        ];
      }
    }
  }, {
    loader: 'sass-loader' // compiles Sass to CSS
  }]
},
...

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