Bungkusan wéb

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

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/dropdown';
...

Bootstrap gumantung kana jQuery sareng Popper , ieu didefinisikeun salaku peerDependencies, ieu ngandung harti yén anjeun kedah pastikeun pikeun nambihan duanana kana panggunaan package.jsonanjeun 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, anggo 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 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
    }]
  },
  ...

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 tiasa nganggo aturan anu tos aya pikeun csstanpa modifikasi khusus pikeun konfigurasi webpack kecuali anjeun henteu peryogi sass-loaderngan ukur gaya-loader sareng css-loader .

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