Omukutu gwa yintaneeti

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

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 yesigamye ku jQuery ne Popper , bino bitegeezebwa nga peerDependencies, 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 bwonna 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 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
    }]
  },
  ...

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']
      }
    ]
  }
  ...