Bɔks

Lan aw fɔ put Bootstrap insay yu prɔjek yuz Parcel.

Na dis pej

Instɔl Pasɛl

Instɔl di Bootstrap

Instɔl bootstrap as wan Node.js mɔdyul we de yuz npm.

Bootstrap dipen pan Popper , we dɛn spɛsifa na di peerDependenciesprɔpati. Dis min se yu go gɛt fɔ mek shɔ se yu ad dɛn ɔl tu to di we aw yu package.jsonde yuz npm install @popperjs/core.

We ɔltin go dɔn, yu prɔjek go strɔkchɔ lɛk dis:

project-name/
├── build/
├── node_modules/
│   └── bootstrap/
│   └── popper.js/
├── scss/
│   └── custom.scss
├── src/
│   └── index.html
│   └── index.js
└── package.json

Impɔtant JavaSkript

Impɔt Bootstrap in JavaSkript na yu ap in ɛntri pɔynt (bɔku tɛm src/index.js). Yu kin impɔtɔt ɔl wi plɔgin dɛn na wan fayl ɔ sɛpret wan if yu nid fɔ gɛt wan smɔl pat pan dɛn nɔmɔ.

// Import all plugins
import * as bootstrap from 'bootstrap';

// Or import only needed plugins
import { Tooltip as Tooltip, Toast as Toast, Popover as Popover } from 'bootstrap';

// Or import just one
import Alert as Alert from '../node_modules/bootstrap/js/dist/alert';

Impɔtant CSS

Fɔ yuz di ful pɔtnɛshɛl fɔ Bootstrap ɛn kɔstɔmayt am to yu nid dɛn, yuz di sɔs fayl dɛn as pat pan yu prɔjek in bɔndling prɔses.

Krio yu yon scss/custom.scssfɔ import Bootstrap in Sass fayl dɛn ɛn afta dat ɔvarayd di bilt-in kɔstɔm vɛriɔbul dɛn .

Bil ap fɔ di ap

Inklud src/index.jsbifo di klosing </body>tag.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <script src="./index.js"></script>
  </body>
</html>

Kɔrɛkt`package.json`

Add devɛn buildskript dɛn na yu package.jsonfayl.

"scripts": {
  "dev": "parcel ./src/index.html",
  "prebuild": "npx rimraf build",
  "build": "parcel build --public-url ./ ./src/index.html --experimental-scope-hoisting --out-dir build"
}

Run dev skript

Yu ap go de na http://127.0.0.1:1234.

npm run dev

Bil ap fayl dɛn

Fayl dɛn we dɛn dɔn bil de na di build/fɔlda.

npm run build