Webpack ak bundlers
Aprann kijan pou mete Bootstrap nan pwojè ou lè l sèvi avèk Webpack oswa lòt bundlers.
Enstale Bootstrap
Enstale bootstrap kòm yon modil Node.js lè l sèvi avèk npm.
Enpòte JavaScript
Enpòte JavaScript Bootstrap a lè w ajoute liy sa a nan pwen antre aplikasyon w lan (anjeneral index.js
oswa app.js
):
import 'bootstrap';
// or get all of the named exports for further usage
import * as bootstrap from 'bootstrap';
Altènativman, si ou sèlman bezwen sèlman kèk nan grefon nou yo, ou ka enpòte grefon endividyèlman jan sa nesesè:
import Alert from 'bootstrap/js/dist/alert';
// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap';
Bootstrap depann de Popper , ki espesifye nan peerDependencies
pwopriyete a. Sa vle di ke w ap gen pou asire w ke w ajoute li nan package.json
itilizasyon w la npm install @popperjs/core
.
Enpòte Styles
Enpòte Sass prekonpile
Pou jwi tout potansyèl Bootstrap la epi personnaliser li selon bezwen ou yo, sèvi ak fichye sous yo kòm yon pati nan pwosesis gwoupman pwojè ou a.
Premyèman, kreye pwòp ou a _custom.scss
epi sèvi ak li pou pase sou plas varyab koutim entegre yo . Lè sa a, sèvi ak dosye prensipal Sass ou a pou enpòte varyab koutim ou yo, ki te swiv pa Bootstrap:
@import "custom";
@import "~bootstrap/scss/bootstrap";
Pou Bootstrap konpile, asire w ke ou enstale epi sèvi ak chajè ki nesesè yo: sass-loader , postcss-loader ak Autoprefixer . Avèk konfigirasyon minim, konfigirasyon webpack ou a ta dwe gen ladan règ sa a oswa menm jan an:
// ...
{
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'
}]
}
// ...
Enpòte konpile CSS
Altènativman, ou ka itilize CSS pare pou itilize Bootstrap la lè w tou senpleman ajoute liy sa a nan pwen antre pwojè ou a:
import 'bootstrap/dist/css/bootstrap.min.css';
Nan ka sa a, ou ka sèvi ak règ ki egziste deja ou a css
san okenn modifikasyon espesyal nan webpack config, eksepte ou pa bezwen sass-loader
jis style-loader ak css-loader .
// ...
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
}
// ...