Jya ku bintu nyamukuru Jya kuri docs
in English

Urubuga rwuzuye

Wige uburyo washyira Bootstrap mumushinga wawe ukoresheje Webpack cyangwa izindi bundler.

Gushyira Bootstrap

Shyiramo bootstrap nka Node.js module ukoresheje npm.

Kuzana JavaScript

Kuzana JavaScript ya Bootstrap wongeyeho uyu murongo aho porogaramu yawe yinjira (mubisanzwe index.jscyangwa app.js):

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

Ubundi, niba ukeneye gusa bike mumacomeka yacu, urashobora gutumiza amacomeka kugiti cye nkuko bikenewe:

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

Bootstrap iterwa na Popper , igaragara peerDependenciesmumitungo. Ibi bivuze ko ugomba kumenya neza ko wongeyeho kubyo package.jsonukoresha npm install @popperjs/core.

Kuzana Imisusire

Kuzana Sass Yateguwe

Kugirango wishimire ubushobozi bwuzuye bwa Bootstrap kandi uyitondere kubyo ukeneye, koresha dosiye yinkomoko nkigice cyumushinga wawe uhuza.

Ubwa mbere, kora ibyawe _custom.scsskandi ubikoreshe kugirango uhishe ibyubatswe muburyo bwihariye . Noneho, koresha dosiye yawe nkuru ya Sass kugirango utumize ibintu byahinduwe, hanyuma ukurikire Bootstrap:

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

Kugirango Bootstrap ikusanye, menya neza ko ushyiraho kandi ukoreshe ibikenerwa bisabwa: sass-umutware , postcss- umutware hamwe na Autoprefixer . Hamwe nimikorere mike, webpack config yawe igomba gushyiramo iri tegeko cyangwa bisa:

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

Kuzana CSS Yakozwe

Ubundi, urashobora gukoresha Bootstrap yiteguye-gukoresha-CSS wongeyeho uyu murongo aho umushinga wawe winjirira:

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

Muri iki kibazo, ushobora gukoresha amategeko yawe asanzweho cssnta gihindutse kidasanzwe kuri webpack config, usibye ko udakeneye sass-loadergusa imiterere-umutwaro na css-umutwaro .

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