Webpack
Alamin kung paano isama ang Bootstrap sa iyong proyekto gamit ang Webpack 3.
I- install ang bootstrap bilang isang Node.js module gamit ang npm.
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
):
Bilang kahalili, maaari kang mag- import ng mga plugin nang paisa-isa kung kinakailangan:
Ang Bootstrap ay nakasalalay sa jQuery at Popper , ang mga ito ay tinukoy bilang peerDependencies
, nangangahulugan ito na kailangan mong tiyakin na idagdag ang pareho ng mga ito sa iyong package.json
paggamit npm install --save jquery popper.js
.
Pansinin na kung pinili mong mag- import ng mga plugin nang paisa- isa , dapat mo ring i-install ang exports-loader
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:
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:
Bilang kahalili, maaari mong gamitin ang ready-to-use css ng Bootstrap sa pamamagitan lamang ng pagdaragdag ng linyang ito sa entry point ng iyong proyekto:
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 .