Webpack lan bundlers
Sinau carane nyakup Bootstrap ing proyek sampeyan nggunakake Webpack utawa bundler liyane.
Nginstal Bootstrap
Instal bootstrap minangka modul Node.js nggunakake npm.
Ngimpor JavaScript
Impor JavaScript Bootstrap kanthi nambahake baris iki menyang titik entri app (biasane index.js
utawa app.js
):
// You can specify which plugins you need
import { Tooltip, Toast, Popover } from 'bootstrap';
Utawa, yen sampeyan mung mbutuhake sawetara plugin, sampeyan bisa ngimpor plugin kanthi individu kaya sing dibutuhake:
import Alert from 'bootstrap/js/dist/alert';
...
Bootstrap gumantung ing Popper , sing ditemtokake ing peerDependencies
properti kasebut. Iki tegese sampeyan kudu nggawe manawa kanggo nambah menyang package.json
nggunakake npm install @popperjs/core
.
Ngimpor Gaya
Ngimpor Sass Precompiled
Kanggo seneng potensial lengkap Bootstrap lan ngatur kanggo kabutuhan, gunakake file sumber minangka bagéan saka proses bundling project.
Pisanan, gawe dhewe _custom.scss
lan gunakake kanggo ngatasi variabel khusus sing wis dibangun . Banjur, gunakake file Sass utama kanggo ngimpor variabel khusus, banjur Bootstrap:
@import "custom";
@import "~bootstrap/scss/bootstrap";
Kanggo kompilasi Bootstrap, priksa manawa sampeyan nginstal lan nggunakake loader sing dibutuhake: sass-loader , postcss-loader karo Autoprefixer . Kanthi persiyapan minimal, konfigurasi webpack sampeyan kudu kalebu aturan iki utawa sing padha:
// ...
{
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'
}]
}
// ...
Ngimpor CSS Dikompilasi
Utawa, sampeyan bisa nggunakake CSS Bootstrap sing siap digunakake kanthi mung nambahake baris iki menyang titik entri proyek sampeyan:
import 'bootstrap/dist/css/bootstrap.min.css';
Ing kasus iki sampeyan bisa nggunakake aturan sing wis ana kanggo css
tanpa modifikasi khusus kanggo webpack config, kajaba sampeyan ora perlu sass-loader
mung gaya-loader lan css-loader .
// ...
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
}
// ...