paket web

Pelajari cara menyertakan Bootstrap dalam proyek Anda menggunakan Webpack 3.

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';

Atau, Anda dapat mengimpor plugin satu per satu sesuai kebutuhan:

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

Bootstrap tergantung pada jQuery dan Popper , ini didefinisikan sebagai peerDependencies, ini berarti Anda harus memastikan untuk menambahkan keduanya ke package.jsonpenggunaan Anda npm install --save jquery popper.js.

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: [{
      loader: 'style-loader', // inject CSS to page
    }, {
      loader: 'css-loader', // translates CSS into CommonJS modules
    }, {
      loader: 'postcss-loader', // Run post css actions
      options: {
        plugins: function () { // post css plugins, can be exported to postcss.config.js
          return [
            require('precss'),
            require('autoprefixer')
          ];
        }
      }
    }, {
      loader: 'sass-loader' // compiles Sass to CSS
    }]
  },
  ...

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