Pacchetto Web

Scopri come includere Bootstrap nel tuo progetto utilizzando Webpack.

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';

In alternativa, puoi importare i plugin individualmente secondo necessità:

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

Bootstrap dipende da jQuery e Popper , questi sono definiti come peerDependencies, questo significa che dovrai assicurarti di aggiungerli entrambi al tuo package.jsonutilizzo npm install --save jquery popper.js.

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

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