Preskoči na glavni sadržaj Preskoči na navigaciju dokumenata
in English

Webpack i bundleri

Naučite kako da uključite Bootstrap u svoj projekat koristeći Webpack ili druge pakete.

Instaliranje Bootstrapa

Instalirajte bootstrap kao Node.js modul koristeći npm.

Uvoz JavaScripta

Uvezite Bootstrap JavaScript dodavanjem ove linije na ulaznu tačku vaše aplikacije (obično index.jsili app.js):

import 'bootstrap';

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

Alternativno, ako vam je potrebno samo nekoliko naših dodataka, možete uvesti dodatke pojedinačno po potrebi:

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

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

Bootstrap ovisi o Popperu , koji je specificiran u peerDependenciessvojstvu. To znači da ćete morati da ga dodate u svoju package.jsonupotrebu npm install @popperjs/core.

Uvoz stilova

Uvoz prekompiliranog Sass

Da biste uživali u punom potencijalu Bootstrapa i prilagodili ga svojim potrebama, koristite izvorne datoteke kao dio procesa povezivanja vašeg projekta.

Prvo, kreirajte svoj vlastiti _custom.scssi koristite ga da nadjačate ugrađene prilagođene varijable . Zatim koristite svoju glavnu Sass datoteku da uvezete svoje prilagođene varijable, nakon čega slijedi Bootstrap:

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

Da bi se Bootstrap kompajlirao, pobrinite se da instalirate i koristite potrebne učitavače: sass-loader , postcss-loader sa Autoprefixer -om . Uz minimalno podešavanje, vaša webpack konfiguracija bi trebala uključivati ​​ovo pravilo ili slično:

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

Uvoz kompajliranog CSS-a

Alternativno, možete koristiti Bootstrap-ov CSS spreman za korištenje jednostavnim dodavanjem ove linije na ulaznu tačku vašeg projekta:

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

U ovom slučaju možete koristiti svoje postojeće pravilo za cssbez ikakvih posebnih modifikacija konfiguracije webpacka, osim što vam ne trebaju sass-loadersamo style-loader i css-loader .

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