Webpack

Ketahui cara memasukkan Bootstrap dalam projek anda menggunakan Webpack.

Memasang Bootstrap

Pasang bootstrap sebagai modul Node.js menggunakan npm.

Mengimport JavaScript

Import JavaScript Bootstrap dengan menambahkan baris ini pada titik masuk apl anda (biasanya index.jsatau app.js):

import 'bootstrap';

Sebagai alternatif, anda boleh mengimport pemalam secara individu mengikut keperluan:

import 'bootstrap/js/dist/util';
import 'bootstrap/js/dist/alert';
...

Bootstrap bergantung pada jQuery dan Popper , yang dinyatakan dalam peerDependenciesharta; ini bermakna anda perlu memastikan untuk menambahkan kedua-duanya pada package.jsonpenggunaan anda npm install --save jquery popper.js.

Mengimport Gaya

Mengimport Sass Tersusun

Untuk menikmati potensi penuh Bootstrap dan menyesuaikannya mengikut keperluan anda, gunakan fail sumber sebagai sebahagian daripada proses penggabungan projek anda.

Mula-mula, buat sendiri _custom.scssdan gunakannya untuk mengatasi pembolehubah tersuai terbina dalam . Kemudian, gunakan fail Sass utama anda untuk mengimport pembolehubah tersuai anda, diikuti dengan Bootstrap:

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

Untuk Bootstrap menyusun, pastikan anda memasang dan menggunakan pemuat yang diperlukan: sass-loader , postcss-loader dengan Autoprefixer . Dengan persediaan yang minimum, konfigurasi webpack anda harus menyertakan peraturan ini atau yang serupa:

...
{
  test: /\.(scss)$/,
  use: [{
    loader: 'style-loader', // inject CSS to page
  }, {
    loader: 'css-loader', // translates CSS into CommonJS modules
  }, {
    loader: 'postcss-loader', // Run postcss actions
    options: {
      plugins: function () { // postcss plugins, can be exported to postcss.config.js
        return [
          require('autoprefixer')
        ];
      }
    }
  }, {
    loader: 'sass-loader' // compiles Sass to CSS
  }]
},
...

Mengimport CSS Tersusun

Sebagai alternatif, anda boleh menggunakan CSS sedia untuk digunakan Bootstrap dengan hanya menambah baris ini pada titik masuk projek anda:

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

Dalam kes ini, anda boleh menggunakan peraturan sedia ada anda csstanpa sebarang pengubahsuaian khas pada konfigurasi webpack, kecuali anda tidak memerlukan sass-loaderhanya style-loader dan css-loader .

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