Webpack

Aflați cum să includeți Bootstrap în proiectul dvs. folosind Webpack.

Instalarea Bootstrap

Instalați bootstrap ca modul Node.js folosind npm.

Se importă JavaScript

Importați JavaScript Bootstrap adăugând această linie la punctul de intrare al aplicației dvs. (de obicei index.jssau app.js):

import 'bootstrap';

Alternativ, puteți importa pluginuri individual , după cum este necesar:

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

Bootstrap depinde de jQuery și Popper , care sunt specificate în peerDependenciesproprietate; aceasta înseamnă că va trebui să vă asigurați că le adăugați pe ambele la package.jsonutilizarea npm install --save jquery popper.jsdvs.

Importul stilurilor

Importul Sass precompilat

Pentru a vă bucura de întregul potențial al Bootstrap și pentru a-l personaliza în funcție de nevoile dvs., utilizați fișierele sursă ca parte a procesului de grupare a proiectului.

Mai întâi, creați-vă propriul _custom.scssși utilizați-l pentru a înlocui variabilele personalizate încorporate . Apoi, utilizați fișierul principal Sass pentru a importa variabilele personalizate, urmat de Bootstrap:

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

Pentru ca Bootstrap să fie compilat, asigurați-vă că instalați și utilizați încărcătoarele necesare: sass-loader , postcss-loader cu Autoprefixer . Cu o configurare minimă, configurația pachetului web ar trebui să includă această regulă sau similară:

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

Import CSS compilat

Alternativ, puteți utiliza CSS-ul Bootstrap gata de utilizare, adăugând pur și simplu această linie la punctul de intrare al proiectului:

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

În acest caz, puteți utiliza regula existentă cssfără modificări speciale la configurația webpack, cu excepția faptului că nu aveți nevoie sass-loaderdoar de style-loader și css-loader .

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