paket web
Pelajari cara menyertakan Bootstrap dalam proyek Anda menggunakan Webpack.
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
):
import 'bootstrap';
Atau, Anda dapat mengimpor plugin satu per satu sesuai kebutuhan:
import 'bootstrap/js/dist/util';
import 'bootstrap/js/dist/alert';
...
Bootstrap tergantung pada jQuery dan Popper , yang ditentukan dalam peerDependencies
properti; ini berarti Anda harus memastikan untuk menambahkan keduanya ke package.json
penggunaan Anda npm install --save jquery popper.js
.
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";
Agar Bootstrap dapat dikompilasi, pastikan Anda menginstal dan menggunakan loader yang diperlukan: sass-loader , postcss-loader dengan Autoprefixer . Dengan pengaturan minimal, konfigurasi webpack Anda harus menyertakan aturan ini atau yang serupa:
...
{
test: /\.(scss)$/,
use: [{
loader: 'style-loader', // inject CSS to page
}, {
loader: 'css-loader', // translates CSS into CommonJS modules
}, {
loader: 'postcss-loader', // Run postcss actions
options: {
plugins: function () { // postcss plugins, can be exported to postcss.config.js
return [
require('autoprefixer')
];
}
}
}, {
loader: 'sass-loader' // compiles Sass to CSS
}]
},
...
Mengimpor CSS yang Dikompilasi
Atau, Anda dapat menggunakan CSS siap pakai Bootstrap hanya dengan menambahkan baris ini ke titik masuk proyek Anda:
import 'bootstrap/dist/css/bootstrap.min.css';
Dalam hal ini Anda dapat menggunakan aturan yang ada untuk css
tanpa modifikasi khusus apa pun pada konfigurasi webpack, kecuali Anda tidak sass-loader
hanya memerlukan style-loader dan css-loader .
...
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
}
...