Webpack
Alamin kung paano isama ang Bootstrap sa iyong proyekto gamit ang Webpack.
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
):
import 'bootstrap';
Bilang kahalili, maaari kang mag- import ng mga plugin nang paisa-isa kung kinakailangan:
import 'bootstrap/js/dist/util';
import 'bootstrap/js/dist/alert';
...
Nakadepende ang Bootstrap sa jQuery at Popper , na tinukoy sa peerDependencies
property; nangangahulugan ito na kailangan mong tiyaking idagdag ang dalawa sa iyong package.json
paggamit npm install --save jquery popper.js
.
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: [{
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
}]
},
...
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']
}
]
}
...