Webpack dan bundler
Pelajari cara menyertakan Bootstrap dalam proyek Anda menggunakan Webpack atau bundler lainnya.
Menginstal Bootstrap
Instal bootstrap sebagai modul Node.js menggunakan npm.
Mengimpor JavaScript
Impor JavaScript Bootstrap dengan menambahkan baris ini ke titik masuk aplikasi Anda (biasanya index.js
atau app.js
):
// You can specify which plugins you need
import { Tooltip, Toast, Popover } from 'bootstrap';
Atau, jika Anda hanya membutuhkan beberapa plugin kami, Anda dapat mengimpor plugin satu per satu sesuai kebutuhan:
import Alert from 'bootstrap/js/dist/alert';
...
Bootstrap tergantung pada Popper , yang ditentukan dalam peerDependencies
properti. Ini berarti Anda harus memastikan untuk menambahkannya ke file package.json
using Anda npm install @popperjs/core
.
Mengimpor Gaya
Mengimpor Sass yang Dikompilasi sebelumnya
Untuk menikmati potensi penuh dari Bootstrap dan menyesuaikannya dengan kebutuhan Anda, gunakan file sumber sebagai bagian dari proses bundling proyek Anda.
Pertama, buat milik Anda sendiri _custom.scss
dan gunakan untuk mengganti variabel khusus bawaan . Kemudian, gunakan file Sass utama Anda untuk mengimpor variabel khusus Anda, diikuti oleh Bootstrap:
@import "custom";
@import "~bootstrap/scss/bootstrap";
For Bootstrap to compile, make sure you install and use the required loaders: sass-loader, postcss-loader with Autoprefixer. With minimal setup, your webpack config should include this rule or similar:
// ...
{
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 Compiled CSS
Alternatively, you may use Bootstrap’s ready-to-use CSS by simply adding this line to your project’s entry point:
import 'bootstrap/dist/css/bootstrap.min.css';
In this case you may use your existing rule for css
without any special modifications to webpack config, except you don’t need sass-loader
just style-loader and css-loader.
// ...
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
}
// ...