Webpack och buntare
Lär dig hur du inkluderar Bootstrap i ditt projekt med hjälp av Webpack eller andra paketenheter.
Installerar Bootstrap
Installera bootstrap som en Node.js-modul med npm.
Importera JavaScript
Importera Bootstraps JavaScript genom att lägga till den här raden till appens ingångspunkt (vanligtvis index.js
eller app.js
):
import 'bootstrap';
// or get all of the named exports for further usage
import * as bootstrap from 'bootstrap';
Alternativt, om du bara behöver några av våra plugins, kan du importera plugins individuellt efter behov:
import Alert from 'bootstrap/js/dist/alert';
// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap';
Bootstrap beror på Popper , som anges i peerDependencies
egenskapen. Det betyder att du måste se till att lägga till den i din package.json
användning npm install @popperjs/core
.
Importera stilar
Importera förkompilerad Sass
För att dra nytta av Bootstraps fulla potential och anpassa den efter dina behov, använd källfilerna som en del av ditt projekts paketeringsprocess.
Skapa först din egen _custom.scss
och använd den för att åsidosätta de inbyggda anpassade variablerna . Använd sedan din Sass-huvudfil för att importera dina anpassade variabler, följt av Bootstrap:
@import "custom";
@import "~bootstrap/scss/bootstrap";
För att Bootstrap ska kompileras, se till att du installerar och använder de nödvändiga laddarna: sass-loader , postcss-loader med Autoprefixer . Med minimal konfiguration bör din webbpaketskonfiguration innehålla denna regel eller liknande:
// ...
{
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'
}]
}
// ...
Importerar kompilerad CSS
Alternativt kan du använda Bootstraps färdiga CSS genom att helt enkelt lägga till den här raden till ditt projekts startpunkt:
import 'bootstrap/dist/css/bootstrap.min.css';
I det här fallet kan du använda din befintliga regel css
utan några speciella modifieringar av webpack-konfiguration, förutom att du inte sass-loader
bara behöver style-loader och css-loader .
// ...
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
}
// ...