Webpack jeung bundlers
Diajar kumaha nyertakeun Bootstrap dina proyék anjeun nganggo Webpack atanapi bundler anu sanés.
Masang Bootstrap
Pasang bootstrap salaku modul Node.js nganggo npm.
Ngimpor JavaScript
Impor JavaScript Bootstrap ku cara nambahkeun garis ieu kana titik éntri aplikasi anjeun (biasana index.js
atawa app.js
):
// You can specify which plugins you need
import { Tooltip, Toast, Popover } from 'bootstrap';
Alternatipna, upami anjeun ngan ukur peryogi sababaraha plugins kami, anjeun tiasa ngimpor plugin masing -masing upami diperyogikeun:
import Alert from 'bootstrap/js/dist/alert';
...
Bootstrap gumantung kana Popper , nu dieusian dina peerDependencies
harta. Ieu ngandung harti yén anjeun bakal kedah pastikeun pikeun nambahkeun kana package.json
pamakéan Anjeun npm install @popperjs/core
.
Impor Gaya
Ngimpor Sass Precompiled
Pikeun mikaresep poténsi pinuh ku Bootstrap sareng nyaluyukeun kana kabutuhan anjeun, paké file sumber salaku bagian tina prosés bundling proyék anjeun.
Kahiji, jieun anjeun sorangan _custom.scss
sareng dianggo pikeun nimpa variabel khusus anu diwangun . Teras, paké file Sass utama anjeun pikeun ngimpor variabel khusus anjeun, dituturkeun ku Bootstrap:
@import "custom";
@import "~bootstrap/scss/bootstrap";
Pikeun Bootstrap nyusun, pastikeun anjeun masang sareng nganggo pamuat anu diperyogikeun: sass-loader , postcss-loader sareng Autoprefixer . Kalayan pangaturan minimal, konfigurasi webpack anjeun kedah kalebet aturan ieu atanapi anu sami:
// ...
{
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'
}]
}
// ...
Importing disusun CSS
Alternatipna, anjeun tiasa nganggo CSS siap dianggo Bootstrap ku ngan saukur nambihan garis ieu kana titik éntri proyék anjeun:
import 'bootstrap/dist/css/bootstrap.min.css';
Dina hal ieu anjeun bisa make aturan anjeun aya pikeun css
tanpa modifikasi husus pikeun webpack config, iwal anjeun teu perlu sass-loader
ngan gaya-loader na css-loader .
// ...
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
}
// ...