Luncat ka eusi utama Luncat ka navigasi docs
in English

Webpack jeung bundlers

Diajar kumaha nyertakeun Bootstrap dina proyék anjeun nganggo Webpack atanapi bundler anu sanés.

Masang Bootstrap

Pasang bootstrap salaku modul Node.js nganggo npm.

Ngimpor JavaScript

Impor JavaScript Bootstrap ku cara nambahkeun garis ieu kana titik éntri aplikasi anjeun (biasana index.jsatawa app.js):

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

Alternatipna, upami anjeun ngan ukur peryogi sababaraha plugins kami, anjeun tiasa ngimpor plugin masing -masing upami diperyogikeun:

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

Bootstrap gumantung kana Popper , nu dieusian dina peerDependenciesharta. Ieu ngandung harti yén anjeun bakal kedah pastikeun pikeun nambahkeun kana package.jsonpamakéan Anjeun npm install @popperjs/core.

Impor Gaya

Ngimpor Sass Precompiled

Pikeun mikaresep poténsi pinuh ku Bootstrap sareng nyaluyukeun kana kabutuhan anjeun, paké file sumber salaku bagian tina prosés bundling proyék anjeun.

Kahiji, jieun anjeun sorangan _custom.scsssareng dianggo pikeun nimpa variabel khusus anu diwangun . Teras, paké file Sass utama anjeun pikeun ngimpor variabel khusus anjeun, dituturkeun ku Bootstrap:

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

Pikeun Bootstrap nyusun, pastikeun anjeun masang sareng nganggo pamuat anu diperyogikeun: sass-loader , postcss-loader sareng Autoprefixer . Kalayan pangaturan minimal, konfigurasi webpack anjeun kedah kalebet aturan ieu atanapi anu sami:

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

Importing disusun CSS

Alternatipna, anjeun tiasa nganggo CSS siap dianggo Bootstrap ku ngan saukur nambihan garis ieu kana titik éntri proyék anjeun:

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

Dina hal ieu anjeun bisa make aturan anjeun aya pikeun csstanpa modifikasi husus pikeun webpack config, iwal anjeun teu perlu sass-loaderngan gaya-loader na css-loader .

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