Webpack at mga bundler
Matutunan kung paano isama ang Bootstrap sa iyong proyekto gamit ang Webpack o iba pang mga bundler.
Pag-install ng Bootstrap
I- install ang bootstrap bilang isang Node.js module gamit ang npm.
Pag-import ng JavaScript
I- import ang JavaScript ng Bootstrap sa pamamagitan ng pagdaragdag ng linyang ito sa entry point ng iyong app (karaniwan ay index.js
o app.js
):
// You can specify which plugins you need
import { Tooltip, Toast, Popover } from 'bootstrap';
Bilang kahalili, kung kailangan mo lamang ng ilan sa aming mga plugin, maaari kang mag- import ng mga plugin nang paisa- isa kung kinakailangan:
import Alert from 'bootstrap/js/dist/alert';
...
Nakadepende ang Bootstrap sa Popper , na tinukoy sa peerDependencies
property. Nangangahulugan ito na kailangan mong tiyakin na idagdag ito sa iyong package.json
paggamit npm install @popperjs/core
.
Pag-import ng mga Estilo
Ini-import ang Precompiled Sass
Upang tamasahin ang buong potensyal ng Bootstrap at i-customize ito sa iyong mga pangangailangan, gamitin ang mga source file bilang bahagi ng proseso ng pag-bundle ng iyong proyekto.
Una, lumikha ng iyong sarili _custom.scss
at gamitin ito upang i-override ang mga built-in na custom na variable . Pagkatapos, gamitin ang iyong pangunahing Sass file upang i-import ang iyong mga custom na variable, na sinusundan ng Bootstrap:
@import "custom";
@import "~bootstrap/scss/bootstrap";
Para makapag-compile ang Bootstrap, tiyaking i-install at ginagamit mo ang mga kinakailangang loader: sass-loader , postcss-loader na may Autoprefixer . Sa kaunting pag-setup, dapat isama ng iyong webpack config ang panuntunang ito o katulad:
// ...
{
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'
}]
}
// ...
Pag-import ng Compiled CSS
Bilang kahalili, maaari mong gamitin ang CSS na handa nang gamitin ng Bootstrap sa pamamagitan lamang ng pagdaragdag ng linyang ito sa entry point ng iyong proyekto:
import 'bootstrap/dist/css/bootstrap.min.css';
Sa kasong ito, maaari mong gamitin ang iyong umiiral na panuntunan nang css
walang anumang mga espesyal na pagbabago sa webpack config, maliban na sass-loader
lamang hindi mo kailangan ng style-loader at css-loader .
// ...
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
}
// ...