Omukutu gwa yintaneeti

Yiga engeri y'okussaamu Bootstrap mu pulojekiti yo ng'okozesa Webpack.

Okuteeka Bootstrap mu nkola

Teeka bootstrap nga module ya Node.js nga okozesa npm.

Okuyingiza JavaScript

Yingiza JavaScript ya Bootstrap ng'ogattako layini eno ku kifo app yo w'eyingira (ebiseera ebisinga index.jsoba app.js):

import 'bootstrap';

Ekirala, oyinza okuyingiza plugins kinnoomu nga bwe kyetaagisa:

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

Bootstrap esinziira ku jQuery ne Popper , eziragiddwa mu peerDependencieskintu; kino kitegeeza nti ojja kuba olina okukakasa nti byombi obigatta ku package.jsonnkozesa yo npm install --save jquery popper.js.

Okuyingiza Emisono

Okuyingiza Sass Ekoleddwa Nga Tennakungula

Okunyumirwa obusobozi obujjuvu obwa Bootstrap n’okugilongoosa okusinziira ku byetaago byo, kozesa fayiro z’ensibuko ng’ekitundu ku nkola ya pulojekiti yo ey’okugatta.

Okusooka, tonda eyiyo _custom.scssera ogikozese okusazaamu enkyukakyuka ez’ennono ezizimbibwamu . Oluvannyuma, kozesa fayiro yo enkulu eya Sass okuyingiza enkyukakyuka zo eza bulijjo, oluvannyuma Bootstrap:

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

Bootstrap okusobola okukung'aanya, kakasa nti oteeka era okozesa ebitikka ebyetaagisa: sass-loader , postcss-loader ne Autoprefixer . Nga olina okuteekawo okutono, webpack config yo erina okubeeramu etteeka lino oba erifaananako bwetyo:

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

Okuyingiza CSS Ekung’aanyiziddwa

Ekirala, oyinza okukozesa CSS ya Bootstrap eyeetegefu okukozesebwa ng’omala kugatta layini eno ku kifo pulojekiti yo w’eyingira:

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

Mu mbeera eno oyinza okukozesa etteeka lyo eririwo for awatali nkyukakyuka yonna ey'enjawulo ku webpack config, okuggyako nga cssteweetaaga style-loader ne css-loader zokka .sass-loader

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