Prijeđi na glavni sadržaj Prijeđi na navigaciju dokumentima
in English

Webpack i paketi

Naučite kako uključiti Bootstrap u svoj projekt pomoću Webpacka ili drugih paketa.

Instaliranje Bootstrapa

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

Uvoz JavaScripta

Uvezite Bootstrapov JavaScript dodavanjem ovog retka na ulaznu točku svoje aplikacije (obično index.jsili app.js):

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

Alternativno, ako trebate samo nekoliko naših dodataka, možete pojedinačno uvesti dodatke prema potrebi:

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

Bootstrap ovisi o Popperu , koji je naveden u peerDependenciessvojstvu. To znači da ćete ga morati dodati svojoj package.jsonupotrebi npm install @popperjs/core.

Uvoz stilova

Uvoz unaprijed kompajliranog Sass-a

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

Najprije izradite vlastiti _custom.scssi upotrijebite ga za nadjačavanje ugrađenih prilagođenih varijabli . Zatim upotrijebite svoju glavnu Sass datoteku za uvoz prilagođenih varijabli, nakon čega slijedi Bootstrap:

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

Da bi se Bootstrap kompilirao, provjerite jeste li instalirali i koristili potrebne učitavače: sass-loader , postcss-loader s Autoprefixer -om . Uz minimalno postavljanje, vaša konfiguracija webpacka trebala bi 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 kompiliranog CSS-a

Alternativno, možete koristiti Bootstrapov CSS spreman za korištenje jednostavnim dodavanjem ovog retka na ulaznu toč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 izmjena u konfiguraciji webpacka, osim što vam ne trebaju sass-loadersamo style-loader i css-loader .

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