Webpack

Μάθετε πώς να συμπεριλάβετε το Bootstrap στο έργο σας χρησιμοποιώντας το Webpack 3.

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

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

Εισαγωγή JavaScript

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

import 'bootstrap';

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

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

Το Bootstrap εξαρτάται από το jQuery και το Popper , αυτά ορίζονται ως peerDependencies, αυτό σημαίνει ότι θα πρέπει να φροντίσετε να προσθέσετε και τα δύο στη package.jsonχρήση npm install --save jquery popper.js.

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

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

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

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

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

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

  ...
  {
    test: /\.(scss)$/,
    use: [{
      loader: 'style-loader', // inject CSS to page
    }, {
      loader: 'css-loader', // translates CSS into CommonJS modules
    }, {
      loader: 'postcss-loader', // Run post css actions
      options: {
        plugins: function () { // post css plugins, can be exported to postcss.config.js
          return [
            require('precss'),
            require('autoprefixer')
          ];
        }
      }
    }, {
      loader: 'sass-loader' // compiles Sass to CSS
    }]
  },
  ...

Εισαγωγή μεταγλωττισμένου 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']
      }
    ]
  }
  ...