Webpack ne bundlers

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):

// You can specify which plugins you need
import { Tooltip, Toast, Popover } from 'bootstrap';

Ekirala, bw’oba ​​weetaaga plugins zaffe ntono zokka, oyinza okuyingiza plugins kinnoomu nga bwe kyetaagisa:

import Alert from 'bootstrap/js/dist/alert';
...

Bootstrap esinziira ku Popper , eragiddwa mu peerDependencieskintu. Kino kitegeeza nti ojja kuba olina okukakasa nti ogigattako ku package.jsonnkozesa yo npm install @popperjs/core.

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: [{
    // inject CSS to page
    loader: 'style-loader'
  }, {
    // translates CSS into CommonJS modules
    loader: 'css-loader'
  }, {
    // Run postcss actions
    loader: 'postcss-loader',
    options: {
      // `postcssOptions` is needed for postcss 8.x;
      // if you use postcss 7.x skip the key
      postcssOptions: {
        // postcss plugins, can be exported to postcss.config.js
        plugins: function () {
          return [
            require('autoprefixer')
          ];
        }
      }
    }
  }, {
    // compiles Sass to CSS
    loader: 'sass-loader'
  }]
}
// ...

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