Webpack

Phunzirani momwe mungaphatikizire Bootstrap mu polojekiti yanu pogwiritsa ntchito Webpack 3.

Kukhazikitsa Bootstrap

Ikani bootstrap ngati gawo la Node.js pogwiritsa ntchito npm.

Kulowetsa JavaScript

Lowetsani JavaScript ya Bootstrap powonjezera mzerewu kumalo olowera pulogalamu yanu (nthawi zambiri index.jskapena app.js):

import 'bootstrap';

Kapenanso, mutha kulowetsa mapulagini payekhapayekha ngati pakufunika:

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

Bootstrap imadalira jQuery ndi Popper , izi zimatanthauzidwa ngati peerDependencies, izi zikutanthauza kuti muyenera kuonetsetsa kuti mwawonjezera zonse pakugwiritsa ntchito package.jsonkwanu npm install --save jquery popper.js.

Masitayelo Olowetsa

Kulowetsa Precompiled Sass

Kuti musangalale ndi kuthekera konse kwa Bootstrap ndikusintha makonda anu kuti agwirizane ndi zosowa zanu, gwiritsani ntchito mafayilo oyambira ngati gawo lakusanjikiza kwa polojekiti yanu.

Choyamba, pangani zanu ndikuzigwiritsa _custom.scssntchito kuti muwongolere zosintha zomwe zakhazikitsidwa . Kenako, gwiritsani ntchito fayilo yanu yayikulu ya sass kuti mulowetse zosintha zanu, zotsatiridwa ndi Bootstrap:

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

Kuti Bootstrap isankhidwe, onetsetsani kuti mwayika ndikugwiritsa ntchito zonyamula zofunika: sass-loader , postcss-loader ndi Autoprefixer . Pokhazikitsa pang'ono, kasinthidwe katsamba lanu katsamba kayenera kukhala ndi lamulo ili kapena zofananira:

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

Kulowetsa CSS Yophatikizidwa

Kapenanso, mutha kugwiritsa ntchito css yokonzeka kugwiritsa ntchito ya Bootstrap pongowonjezera mzerewu kumalo olowera polojekiti yanu:

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

Apa mutha kugwiritsa ntchito lamulo lanu lomwe lidalipo csspopanda kusintha kwapadera pakusintha kwapapaketi pokhapokha ngati simukufuna kungoyika sass-loaderstyle -loader ndi css-loader .

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