Urubuga

Wige uburyo washyira Bootstrap mumushinga wawe ukoresheje Webpack 3.

Gushyira Bootstrap

Shyiramo bootstrap nka Node.js module ukoresheje npm.

Kuzana JavaScript

Kuzana JavaScript ya Bootstrap wongeyeho uyu murongo aho porogaramu yawe yinjira (mubisanzwe index.jscyangwa app.js):

import 'bootstrap';

Ubundi, urashobora gutumiza amacomeka kugiti cye nkuko bikenewe:

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

Bootstrap iterwa na jQuery na Popper , ibi bisobanuwe nk peerDependencies, ibi bivuze ko ugomba gukora ibishoboka byose kugirango wongere byombi mubyo package.jsonukoresha npm install --save jquery popper.js.

Kuzana Imisusire

Kuzana Sass Yateguwe

Kugirango wishimire ubushobozi bwuzuye bwa Bootstrap kandi uyitondere kubyo ukeneye, koresha dosiye yinkomoko nkigice cyumushinga wawe uhuza.

Ubwa mbere, kora ibyawe _custom.scsskandi ubikoreshe kugirango uhishe ibyubatswe muburyo bwihariye . Noneho, koresha dosiye yawe nyamukuru ya sass kugirango utumize ibintu byahinduwe, hanyuma ukurikire Bootstrap:

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

Kugirango Bootstrap ikusanye, menya neza ko ushyiraho kandi ukoreshe ibikenerwa bisabwa: sass-umutware , postcss- umutware hamwe na Autoprefixer . Hamwe nimikorere mike, webpack config yawe igomba gushyiramo iri tegeko cyangwa bisa:

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

Kuzana CSS Yakozwe

Ubundi, urashobora gukoresha Bootstrap yiteguye-gukoresha-css wongeyeho uyu murongo aho umushinga wawe winjirira:

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

Muri iki kibazo, ushobora gukoresha amategeko yawe asanzweho cssnta gihindutse kidasanzwe kuri webpack config usibye ko udakeneye sass-loadergusa imiterere-umutwaro na css-umutwaro .

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