Webpack και bundler

Εγκατάσταση Bootstrap

Εγκαταστήστε το bootstrap ως λειτουργική μονάδα Node.js χρησιμοποιώντας npm.

Εισαγωγή JavaScript

Εισαγάγετε το JavaScript του Bootstrap προσθέτοντας αυτήν τη γραμμή στο σημείο εισόδου της εφαρμογής σας (συνήθως index.jsή app.js):

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

Εναλλακτικά, εάν χρειάζεστε μόνο μερικές από τις προσθήκες μας, μπορείτε να εισαγάγετε προσθήκες μεμονωμένα ανάλογα με τις ανάγκες:

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

Το Bootstrap εξαρτάται από το Popper , το οποίο καθορίζεται στην peerDependenciesιδιότητα. Αυτό σημαίνει ότι θα πρέπει να φροντίσετε να το προσθέσετε στη package.jsonχρήση npm install @popperjs/core.

Εισαγωγή στυλ

Εισαγωγή προμεταγλωττισμένου Sass

Για να απολαύσετε όλες τις δυνατότητες του Bootstrap και να το προσαρμόσετε στις ανάγκες σας, χρησιμοποιήστε τα αρχεία προέλευσης ως μέρος της διαδικασίας ομαδοποίησης του έργου σας.

Αρχικά, δημιουργήστε το δικό σας _custom.scssκαι χρησιμοποιήστε το για να παρακάμψετε τις ενσωματωμένες προσαρμοσμένες μεταβλητές . Στη συνέχεια, χρησιμοποιήστε το κύριο αρχείο Sass για να εισαγάγετε τις προσαρμοσμένες μεταβλητές σας, ακολουθούμενο από το Bootstrap:

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

Για τη μεταγλώττιση του Bootstrap, βεβαιωθείτε ότι έχετε εγκαταστήσει και χρησιμοποιείτε τους απαιτούμενους φορτωτές: sass -loader , postcss-loader με Autoprefixer . Με ελάχιστη ρύθμιση, η διαμόρφωση του πακέτου ιστού σας θα πρέπει να περιλαμβάνει αυτόν τον κανόνα ή παρόμοιο:

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

Εισαγωγή μεταγλωττισμένου CSS

Εναλλακτικά, μπορείτε να χρησιμοποιήσετε το έτοιμο προς χρήση CSS του Bootstrap προσθέτοντας απλώς αυτήν τη γραμμή στο σημείο εισόδου του έργου σας:

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

Σε αυτήν την περίπτωση, μπορείτε να χρησιμοποιήσετε τον υπάρχοντα κανόνα σας cssχωρίς ιδιαίτερες τροποποιήσεις στη διαμόρφωση του πακέτου web, εκτός από το ότι δεν χρειάζεστε sass-loaderμόνο style-loader και css-loader .

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