Webpack og bundlere
Lær, hvordan du inkluderer Bootstrap i dit projekt ved hjælp af Webpack eller andre bundtere.
Installation af Bootstrap
Installer bootstrap som et Node.js-modul ved hjælp af npm.
Importerer JavaScript
Importer Bootstraps JavaScript ved at tilføje denne linje til din apps indgangspunkt (normalt index.js
eller app.js
):
import 'bootstrap';
// or get all of the named exports for further usage
import * as bootstrap from 'bootstrap';
Alternativt, hvis du kun har brug for nogle få af vores plugins, kan du importere plugins individuelt efter behov:
import Alert from 'bootstrap/js/dist/alert';
// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap';
Bootstrap afhænger af Popper , som er specificeret i peerDependencies
egenskaben. Det betyder, at du skal sørge for at tilføje den til din package.json
brug npm install @popperjs/core
.
Import af stilarter
Importerer prækompileret Sass
For at nyde det fulde potentiale af Bootstrap og tilpasse det til dine behov, skal du bruge kildefilerne som en del af dit projekts bundlingproces.
Først skal du oprette din egen _custom.scss
og bruge den til at tilsidesætte de indbyggede tilpassede variabler . Brug derefter din primære Sass-fil til at importere dine tilpassede variabler efterfulgt af Bootstrap:
@import "custom";
@import "~bootstrap/scss/bootstrap";
For at Bootstrap kan kompilere, skal du sørge for at installere og bruge de påkrævede indlæsere: sass-loader , postcss-loader med Autoprefixer . Med minimal opsætning bør din webpack-konfiguration indeholde denne regel eller lignende:
// ...
{
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'
}]
}
// ...
Importerer kompileret CSS
Alternativt kan du bruge Bootstraps klar-til-brug CSS ved blot at tilføje denne linje til dit projekts indgangspunkt:
import 'bootstrap/dist/css/bootstrap.min.css';
I dette tilfælde kan du bruge din eksisterende regel css
uden nogen specielle ændringer til webpack-konfiguration, bortset fra at du ikke sass-loader
kun behøver style-loader og css-loader .
// ...
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
}
// ...