Pek web dan pengikat
Ketahui cara memasukkan Bootstrap dalam projek anda menggunakan Webpack atau pengikat lain.
Memasang Bootstrap
Pasang bootstrap sebagai modul Node.js menggunakan npm.
Mengimport JavaScript
Import JavaScript Bootstrap dengan menambahkan baris ini pada titik masuk apl anda (biasanya index.js
atau app.js
):
import 'bootstrap';
// or get all of the named exports for further usage
import * as bootstrap from 'bootstrap';
Sebagai alternatif, jika anda hanya memerlukan beberapa pemalam kami, anda boleh mengimport pemalam secara individu mengikut keperluan:
import Alert from 'bootstrap/js/dist/alert';
// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap';
Bootstrap bergantung pada Popper , yang dinyatakan dalam peerDependencies
hartanah. Ini bermakna anda perlu memastikan untuk menambahkannya pada package.json
penggunaan anda npm install @popperjs/core
.
Mengimport Gaya
Mengimport Sass Tersusun
Untuk menikmati potensi penuh Bootstrap dan menyesuaikannya mengikut keperluan anda, gunakan fail sumber sebagai sebahagian daripada proses penggabungan projek anda.
Mula-mula, buat sendiri _custom.scss
dan gunakannya untuk mengatasi pembolehubah tersuai terbina dalam . Kemudian, gunakan fail Sass utama anda untuk mengimport pembolehubah tersuai anda, diikuti dengan Bootstrap:
@import "custom";
@import "~bootstrap/scss/bootstrap";
Untuk Bootstrap menyusun, pastikan anda memasang dan menggunakan pemuat yang diperlukan: sass-loader , postcss-loader dengan Autoprefixer . Dengan persediaan yang minimum, konfigurasi webpack anda harus menyertakan peraturan ini atau yang serupa:
// ...
{
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'
}]
}
// ...
Mengimport CSS Tersusun
Sebagai alternatif, anda boleh menggunakan CSS sedia untuk digunakan Bootstrap dengan hanya menambah baris ini pada titik masuk projek anda:
import 'bootstrap/dist/css/bootstrap.min.css';
Dalam kes ini, anda boleh menggunakan peraturan sedia ada anda css
tanpa sebarang pengubahsuaian khas pada konfigurasi webpack, kecuali anda tidak memerlukan sass-loader
hanya style-loader dan css-loader .
// ...
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
}
// ...