Webpack

Sinau carane nyakup Bootstrap ing proyek sampeyan nggunakake Webpack 3.

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):

import 'bootstrap';

Utawa, sampeyan bisa ngimpor plugin siji-siji yen perlu:

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

Bootstrap gumantung ing jQuery lan Popper , iki ditetepake minangka peerDependencies, iki tegese sampeyan kudu nggawe manawa kanggo nambah loro mau kanggo package.jsonnggunakake npm install --save jquery popper.js.

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: [{
      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
    }]
  },
  ...

Ngimpor CSS Dikompilasi

Utawa, sampeyan bisa nggunakake css siap digunakake Bootstrap 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 style-loader lan css-loader .

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