Webpack

Dzidza maitiro ekusanganisa Bootstrap mupurojekiti yako uchishandisa Webpack.

Kuisa Bootstrap

Isa bootstrap seNode.js module uchishandisa npm.

Kupinza JavaScript

Ngenisa Bootstrap's JavaScript nekuwedzera iyi mutsara kunzvimbo yekupinda yeapp yako (kazhinji index.jskana app.js):

import 'bootstrap';

Neimwe nzira, unogona kupinza plugins wega sezvinodiwa:

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

Bootstrap inotsamira pane jQuery nePopper , izvi zvinotsanangurwa se peerDependencies, izvi zvinoreva kuti uchafanirwa kuve nechokwadi chekuwedzera ese ari maviri package.jsonpakushandisa kwako npm install --save jquery popper.js.

Importing Styles

Kupinza Precompiled Sass

Kuti unakirwe neiyo yakazara kugona kweBootstrap uye kuigadzirisa kune zvaunoda, shandisa iyo sosi mafaera sechikamu chepurojekiti yako yekuunganidza maitiro.

Kutanga, gadzira yako _custom.scssuye uishandise kupfuudza iyo yakavakirwa-mukati tsika zvinosiyana . Zvadaro, shandisa yako huru Sass faira kupinza yako tsika dzakasiyana, inoteverwa neBootstrap:

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

Kuti Bootstrap iunganidze, ita shuwa kuti iwe unoisa uye shandisa inodiwa inotakura: sass-loader , postcss-loader ne Autoprefixer . Nekuseta kushoma, yako webpack config inofanira kusanganisira mutemo uyu kana zvakafanana:

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

Kupinza Yakaunganidzwa CSS

Neimwe nzira, unogona kushandisa Bootstrap's yakagadzirira-kushandisa-CSS nekungowedzera iyi mutsara kunzvimbo yekupinda purojekiti yako:

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

Mune ino kesi unogona kushandisa mutemo wako uripo csspasina chero yakakosha shanduko kune webpack config, kunze kwekunge iwe usingade sass-loaderchete style-loader uye css-loader .

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