Webpack e bundler

Installazione di Bootstrap

Installa bootstrap come modulo Node.js usando npm.

Importazione di JavaScript

Importa JavaScript di Bootstrap aggiungendo questa riga al punto di ingresso della tua app (di solito index.jso app.js):

import 'bootstrap';

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

In alternativa, se hai bisogno solo di alcuni dei nostri plugin, puoi importare i plugin individualmente secondo necessità:

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

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

Bootstrap dipende da Popper , che è specificato nella peerDependenciesproprietà. Ciò significa che dovrai assicurarti di aggiungerlo al tuo package.jsonusing npm install @popperjs/core.

Importazione di stili

Importazione di Sass

Per sfruttare appieno il potenziale di Bootstrap e personalizzarlo in base alle tue esigenze, utilizza i file di origine come parte del processo di raggruppamento del tuo progetto.

Innanzitutto, creane uno tuo _custom.scsse usalo per sovrascrivere le variabili personalizzate integrate . Quindi, usa il tuo file Sass principale per importare le tue variabili personalizzate, seguito da Bootstrap:

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

Per la compilazione di Bootstrap, assicurati di installare e utilizzare i caricatori richiesti: sass-loader , postcss-loader con Autoprefixer . Con una configurazione minima, la configurazione del tuo webpack dovrebbe includere questa regola o simili:

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

Importazione di CSS compilati

In alternativa, puoi utilizzare il CSS pronto all'uso di Bootstrap semplicemente aggiungendo questa riga al punto di ingresso del tuo progetto:

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

In questo caso puoi usare la tua regola esistente csssenza alcuna modifica speciale alla configurazione del webpack, tranne per il fatto che non hai bisogno sass-loadersolo di style-loader e css-loader .

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