האָפּקען צו הויפּט אינהאַלט האָפּקען צו דאָקס נאַוויגאַציע
in English

וועבפּאַק און בונדלערס

לערן ווי צו אַרייַננעמען Bootstrap אין דיין פּרויעקט ניצן וועבפּאַקק אָדער אנדערע באַנדלערז.

ינסטאַלירן Bootstrap

ינסטאַלירן באָאָטסטראַפּ ווי אַ Node.js מאָדולע ניצן npm.

ימפּאָרטינג דזשאַוואַסקריפּט

אַרייַנפיר באָאָטסטראַפּ ס דזשאַוואַסקריפּט דורך אַדינג דעם שורה צו דיין אַפּ ס פּאָזיציע פונט (יוזשאַוואַלי index.jsאָדער app.js):

import 'bootstrap';

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

אַלטערנאַטיוועלי, אויב איר נאָר דאַרפֿן אַ ביסל פון אונדזער פּלוגינס, איר קענט אַרייַנפיר פּלוגינס ינדיווידזשואַלי ווי דארף:

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

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

באָאָטסטראַפּ דעפּענדס אויף פּאָפּער , וואָס איז ספּעסיפיעד אין די peerDependenciesפאַרמאָג. דעם מיטל אַז איר וועט האָבן צו מאַכן זיכער צו לייגן עס צו דיין package.jsonנוצן npm install @popperjs/core.

ימפּאָרטינג סטיילז

ימפּאָרטינג פּרעקאָמפּילעד סאַס

צו געניסן די פול פּאָטענציעל פון Bootstrap און קאַסטאַמייז עס צו דיין דאַרף, נוצן די מקור טעקעס ווי אַ טייל פון דיין פּרויעקט ס באַנדלינג פּראָצעס.

ערשטער, מאַכן דיין אייגענע _custom.scssאון נוצן עס צו אָווועררייד די געבויט-אין מנהג וועריאַבאַלז . דערנאָך, נוצן דיין הויפּט Sass טעקע צו אַרייַנפיר דיין מנהג וועריאַבאַלז, נאכגעגאנגען דורך Bootstrap:

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

פֿאַר Bootstrap צו זאַמלען, מאַכן זיכער אַז איר ינסטאַלירן און נוצן די פארלאנגט לאָודערז: sass-loader , postcss-loader מיט Autoprefixer . מיט מינימאַל סעטאַפּ, דיין וועבפּאַק קאָנפיג זאָל אַרייַננעמען דעם הערשן אָדער ענלעך:

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

ימפּאָרטינג קאָמפּילעד קסס

אַלטערנאַטיוועלי, איר קענט נוצן Bootstrap ס גרייט-צו-נוצן CSS דורך פשוט אַדינג די שורה צו די פּאָזיציע פונט פון דיין פּרויעקט:

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

אין דעם פאַל, איר קענט נוצן דיין יגזיסטינג הערשן cssאָן קיין ספּעציעל מאָדיפיקאַטיאָנס צו וועבפּאַק קאַנפיגיעריישאַן, אַחוץ איר טאָן ניט דאַרפֿן sass-loaderנאָר סטיל-לאָודער און קסס-לאָודער .

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