וועבפּאַק

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

ינסטאָלינג Bootstrap

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

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

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

import 'bootstrap';

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

import 'bootstrap/js/dist/util';
import 'bootstrap/js/dist/alert';
...

באָאָטסטראַפּ איז אָפענגיק אויף דזשקווערי און פּאָפּער , די זענען דיפיינד ווי peerDependencies, דאָס מיטל אַז איר וועט האָבן צו מאַכן זיכער צו לייגן זיי ביידע צו דיין package.jsonנוצן npm install --save jquery popper.js.

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

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

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

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

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

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

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

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

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

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

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

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