Lopango

Yekola ndenge nini okoki kotia Bootstrap na projet na yo na kosalelaka Parcel.

Na lokasa oyo

Botia Parcelle

Botia Paquet ya Parcelle .

Botia na esika bakomi Bootstrap

Botia bootstrap lokola module ya Node.js na kosalelaka npm.

Bootstrap etali Popper , oyo elakisami na peerDependenciespropriété. Yango elingi koloba ete ekosɛnga osala makasi mpo na kobakisa yango nyonso mibale na ndenge oyo package.jsonosaleli npm install @popperjs/core.

Tango nionso ekosila, projet na yo ekozala structuré boye:

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

Kokɔtisa JavaScript na kati

Importer JavaScript ya Bootstrap na point d’entrée ya app na yo (mingi mingi src/index.js). Okoki ko importer ba plugins na biso nionso na fichier moko to separatement soki oza na besoin kaka sous-ensemble na yango.

// 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';

Kokɔtisa CSS na mboka mopaya

Mpo na kosalela makoki nyonso ya Bootstrap mpe kosala yango na kotalela bamposa na yo, salelá bafichiers ya source lokola eteni ya mosala ya kosala bosangisi ya mosala na yo.

Salá ya yo moko scss/custom.scssmpo na kokɔtisa ba fichiers Sass ya Bootstrap mpe na nsima kolongola ba variables personnalisées oyo etongami na kati .

Tongela app

Botia yango liboso ya tag src/index.jsya bokangami .</body>

<!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>

Kokoma`package.json`

Bakisa devmpe ba buildscripts na package.jsonfichier na yo.

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

Tambwisa script ya dev

Application na yo ekozala accessible na http://127.0.0.1:1234.

npm run dev

Tongela ba fichiers ya app

Ba fichiers oyo etongami ezali na kati ya build/dossier.

npm run build