Bungkusan wéb

Diajar kumaha ngalebetkeun Bootstrap dina proyék anjeun nganggo Webpack.

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

import 'bootstrap';

Alternatipna, anjeun tiasa ngimpor plugin masing -masing upami diperyogikeun:

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

Bootstrap gumantung kana jQuery na Popper , nu dieusian dina peerDependenciesharta; Ieu ngandung harti yén anjeun bakal kedah pastikeun pikeun nambahkeun duanana ka package.jsonpamakéan Anjeun npm install --save jquery popper.js.

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

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