Webpack dan bundler

Menginstal Bootstrap

Instal bootstrap sebagai modul Node.js menggunakan npm.

Mengimpor JavaScript

Impor JavaScript Bootstrap dengan menambahkan baris ini ke titik masuk aplikasi Anda (biasanya index.jsatau app.js):

import 'bootstrap';

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

Atau, jika Anda hanya membutuhkan beberapa plugin kami, Anda dapat mengimpor plugin satu per satu sesuai kebutuhan:

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

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

Bootstrap tergantung pada Popper , yang ditentukan dalam peerDependenciesproperti. Ini berarti Anda harus memastikan untuk menambahkannya ke file package.jsonusing Anda npm install @popperjs/core.

Mengimpor Gaya

Mengimpor Sass yang Dikompilasi sebelumnya

Untuk menikmati potensi penuh dari Bootstrap dan menyesuaikannya dengan kebutuhan Anda, gunakan file sumber sebagai bagian dari proses bundling proyek Anda.

Pertama, buat milik Anda sendiri _custom.scssdan gunakan untuk mengganti variabel khusus bawaan . Kemudian, gunakan file Sass utama Anda untuk mengimpor variabel khusus Anda, diikuti oleh Bootstrap:

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

Agar Bootstrap dapat dikompilasi, pastikan Anda menginstal dan menggunakan loader yang diperlukan: sass-loader , postcss-loader dengan Autoprefixer . Dengan pengaturan minimal, konfigurasi webpack Anda harus menyertakan aturan ini atau yang serupa:

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

Mengimpor CSS yang Dikompilasi

Atau, Anda dapat menggunakan CSS siap pakai Bootstrap hanya dengan menambahkan baris ini ke titik masuk proyek Anda:

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

Dalam hal ini Anda dapat menggunakan aturan yang ada untuk csstanpa modifikasi khusus apa pun pada konfigurasi webpack, kecuali Anda tidak sass-loaderhanya memerlukan style-loader dan css-loader .

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