Lumpat menyang isi utama Lumpat menyang pandhu arah docs
in English

Webpack lan bundlers

Sinau carane nyakup Bootstrap ing proyek sampeyan nggunakake Webpack utawa bundler liyane.

Nginstal Bootstrap

Instal bootstrap minangka modul Node.js nggunakake npm.

Ngimpor JavaScript

Impor JavaScript Bootstrap kanthi nambahake baris iki menyang titik entri app (biasane index.jsutawa app.js):

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

Utawa, yen sampeyan mung mbutuhake sawetara plugin, sampeyan bisa ngimpor plugin kanthi individu kaya sing dibutuhake:

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

Bootstrap gumantung ing Popper , sing ditemtokake ing peerDependenciesproperti kasebut. Iki tegese sampeyan kudu nggawe manawa kanggo nambah menyang package.jsonnggunakake npm install @popperjs/core.

Ngimpor Gaya

Ngimpor Sass Precompiled

Kanggo seneng potensial lengkap Bootstrap lan ngatur kanggo kabutuhan, gunakake file sumber minangka bagéan saka proses bundling project.

Pisanan, gawe dhewe _custom.scsslan gunakake kanggo ngatasi variabel khusus sing wis dibangun . Banjur, gunakake file Sass utama kanggo ngimpor variabel khusus, banjur Bootstrap:

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

Kanggo kompilasi Bootstrap, priksa manawa sampeyan nginstal lan nggunakake loader sing dibutuhake: sass-loader , postcss-loader karo Autoprefixer . Kanthi persiyapan minimal, konfigurasi webpack sampeyan kudu kalebu aturan iki utawa sing padha:

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

Ngimpor CSS Dikompilasi

Utawa, sampeyan bisa nggunakake CSS Bootstrap sing siap digunakake kanthi mung nambahake baris iki menyang titik entri proyek sampeyan:

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

Ing kasus iki sampeyan bisa nggunakake aturan sing wis ana kanggo csstanpa modifikasi khusus kanggo webpack config, kajaba sampeyan ora perlu sass-loadermung gaya-loader lan css-loader .

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