Webpack και bundler
Μάθετε πώς να συμπεριλάβετε το Bootstrap στο έργο σας χρησιμοποιώντας το Webpack ή άλλα bundler.
Εγκατάσταση Bootstrap
Εγκαταστήστε το bootstrap ως λειτουργική μονάδα Node.js χρησιμοποιώντας npm.
Εισαγωγή JavaScript
Εισαγάγετε το JavaScript του Bootstrap προσθέτοντας αυτήν τη γραμμή στο σημείο εισόδου της εφαρμογής σας (συνήθως index.js
ή app.js
):
import 'bootstrap';
// or get all of the named exports for further usage
import * as bootstrap from 'bootstrap';
Εναλλακτικά, εάν χρειάζεστε μόνο μερικές από τις προσθήκες μας, μπορείτε να εισαγάγετε προσθήκες μεμονωμένα ανάλογα με τις ανάγκες:
import Alert from 'bootstrap/js/dist/alert';
// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap';
Το 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'
]
}
]
}
// ...