Webpack

Aprann kijan pou mete Bootstrap nan pwojè ou lè l sèvi avèk Webpack.

Enstale Bootstrap

Enstale bootstrap kòm yon modil Node.js lè l sèvi avèk npm.

Enpòte JavaScript

Enpòte JavaScript Bootstrap a lè w ajoute liy sa a nan pwen antre aplikasyon w lan (anjeneral index.jsoswa app.js):

import 'bootstrap';

Altènativman, ou ka enpòte grefon endividyèlman jan sa nesesè:

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

Bootstrap depann sou jQuery ak Popper , ki espesifye nan peerDependenciespwopriyete a; sa vle di ke w ap gen pou asire w ke w ajoute tou de nan w ap package.jsonitilize yo npm install --save jquery popper.js.

Enpòte Styles

Enpòte Sass prekonpile

Pou jwi tout potansyèl Bootstrap la epi pèsonalize li selon bezwen ou yo, sèvi ak dosye sous yo kòm yon pati nan pwosesis grouping pwojè ou a.

Premyèman, kreye pwòp ou a _custom.scssepi sèvi ak li pou pase sou plas varyab koutim entegre yo . Lè sa a, sèvi ak dosye prensipal Sass ou a pou enpòte varyab koutim ou yo, ki te swiv pa Bootstrap:

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

Pou Bootstrap konpile, asire w ke ou enstale epi sèvi ak chajè ki nesesè yo: sass-loader , postcss-loader ak Autoprefixer . Avèk konfigirasyon minim, konfigirasyon webpack ou a ta dwe gen ladan règ sa a oswa menm jan an:

...
{
  test: /\.(scss)$/,
  use: [{
    loader: 'style-loader', // inject CSS to page
  }, {
    loader: 'css-loader', // translates CSS into CommonJS modules
  }, {
    loader: 'postcss-loader', // Run postcss actions
    options: {
      plugins: function () { // postcss plugins, can be exported to postcss.config.js
        return [
          require('autoprefixer')
        ];
      }
    }
  }, {
    loader: 'sass-loader' // compiles Sass to CSS
  }]
},
...

Enpòte konpile CSS

Altènativman, ou ka itilize CSS pare pou itilize Bootstrap la lè w tou senpleman ajoute liy sa a nan pwen antre pwojè ou a:

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

Nan ka sa a, ou ka sèvi ak règ ou ki egziste deja csssan okenn modifikasyon espesyal nan webpack config, eksepte ou pa bezwen sass-loaderjis style-loader ak css-loader .

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