Webpack și bundlere

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):

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

Alternativ, dacă aveți nevoie doar de câteva dintre pluginurile noastre, puteți importa pluginuri individual , după cum este necesar:

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

Bootstrap depinde de Popper , care este specificat în peerDependenciesproprietate. Aceasta înseamnă că va trebui să vă asigurați că îl adăugați la package.jsonutilizarea npm install @popperjs/coredvs.

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

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