Svetuka kune chikuru content Svetuka kuenda kudocs navigation
in English

Webpack uye bundlers

Dzidza maitiro ekusanganisa Bootstrap mupurojekiti yako uchishandisa Webpack kana mamwe mabundle.

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';

// or get all of the named exports for further usage
import * as bootstrap from 'bootstrap';

Neimwe nzira, kana uchingoda mashoma emaplugins edu, unogona kupinza maplugins ega sezvinodiwa:

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

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

Bootstrap inoenderana nePopper , iyo inotsanangurwa peerDependenciesmumudziyo. Izvi zvinoreva kuti iwe uchafanirwa kuve nechokwadi chekuwedzera kune yako package.jsonkushandisa npm install @popperjs/core.

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

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