Webpack en bundlers
Learje hoe't jo Bootstrap opnimme yn jo projekt mei Webpack of oare bondelers.
Ynstallaasje fan Bootstrap
Ynstallearje bootstrap as in Node.js-module mei npm.
It ymportearjen fan JavaScript
Ymportearje Bootstrap's JavaScript troch dizze rigel ta te foegjen oan it yngongspunt fan jo app (normaal index.js
of app.js
):
import 'bootstrap';
// or get all of the named exports for further usage
import * as bootstrap from 'bootstrap';
As alternatyf, as jo mar in pear fan ús plugins nedich binne, kinne jo plugins yndividueel ymportearje as nedich:
import Alert from 'bootstrap/js/dist/alert';
// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap';
Bootstrap is ôfhinklik fan Popper , dat wurdt oantsjutte yn it peerDependencies
pân. Dit betsjut dat jo derfoar soargje moatte dat jo it tafoegje oan jo package.json
gebrûk npm install @popperjs/core
.
Ymportearje Styles
Ymportearje Precompiled Sass
Om it folsleine potensjeel fan Bootstrap te genietsjen en it oan te passen oan jo behoeften, brûk de boarnebestannen as ûnderdiel fan it bondelproses fan jo projekt.
Meitsje earst jo eigen en brûk it om de ynboude oanpaste fariabelen_custom.scss
te oerskriuwen . Brûk dan jo haad Sass-bestân om jo oanpaste fariabelen te ymportearjen, folge troch Bootstrap:
@import "custom";
@import "~bootstrap/scss/bootstrap";
Foar Bootstrap om te kompilearjen, soargje derfoar dat jo de fereaske loaders ynstallearje en brûke: sass-loader , postcss-loader mei Autoprefixer . Mei minimale opset moat jo webpack-konfiguraasje dizze regel as ferlykber befetsje:
// ...
{
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'
}]
}
// ...
It ymportearjen fan kompilearre CSS
As alternatyf kinne jo Bootstrap's ready-to-use CSS brûke troch gewoan dizze rigel ta te foegjen oan it yngongspunt fan jo projekt:
import 'bootstrap/dist/css/bootstrap.min.css';
Yn dit gefal meie jo jo besteande regel brûke foar css
sûnder spesjale oanpassingen oan webpack-konfiguraasje, útsein dat jo net sass-loader
allinich style-loader en css-loader nedich binne .
// ...
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
}
// ...