Bootstrap ɛn Vite

Di ɔfishal gayd fɔ aw fɔ inklud ɛn bɔnd Bootstrap in CSS ɛn JavaSkript insay yu prɔjek we yu de yuz Vite.

Na dis pej

Yu want fɔ skip te yu rich di ɛnd? Daunlod di sɔs kɔd ɛn wok demo fɔ dis gayd frɔm di twbs/ɛgzampul ripɔsitɔri . Yu kin opin di ɛgzampul bak na StackBlitz fɔ layv ɛditin.

Put

Wi de bil wan Vite projɛkt wit Bootstrap frɔm skrach, so sɔm prɛrikuls dɛn de ɛn ɔp frɔnt stɛp dɛn bifo wi kin rili bigin. Dis gayd nid fɔ mek yu gɛt Node.js instɔl ɛn sɔm familiyariti wit di tɛminal.

Krio wan projɛkt fɔlda ɛn sɛtup npm. Wi go mek di my-projectfɔlda ɛn initialize npm wit di -yargumɛnt fɔ mek i nɔ aks wi ɔl di intaraktiv kwɛstyɔn dɛn.
```
mkdir my-project && cd my-project
npm init -y
```
Instɔl Vite fɔ yuz. Nɔ lɛk wi Wɛbpak gayd, na wan bil tul dipɛnshɔn nɔmɔ de ya. Wi de yuz --save-devfɔ signal se dis dipɛnshɔn na fɔ divɛlɔpmɛnt yus nɔmɔ ɛn nɔto fɔ prodakshɔn.
```
npm i --save-dev vite
```
Instɔl di Bootstrap. Naw wi kin instɔl Bootstrap. Wi go instɔl Popper bak bikɔs wi drɔpdɔwn, popovers, ɛn tultip dɛn dipen pan am fɔ dɛn pozishɔn. If yu nɔ plan fɔ yuz dɛn kɔmpɔnɛnt dɛn de, yu kin ɔmit Popper ya.
```
npm i --save bootstrap @popperjs/core
```
Instɔl ɔda dipɛnsin dɛn. Apat frɔm Vite ɛn Bootstrap, wi nid ɔda dipɛnsin (Sass) fɔ impɔtɔt ɛn bɔndl Bootstrap in CSS fayn fayn wan.
```
npm i --save-dev sass
```

Naw we wi dɔn instɔl ɛn sɛtup ɔl di dipɛnsin dɛn we wi nid, wi kin bigin fɔ wok fɔ mek di prɔjek fayl dɛn ɛn fɔ import Bootstrap.

Projekt strɔkchɔ

Wi don olredi kriet di my-projectfolda en initialize npm. Naw wi go mek wi srcfɔlda, staylshit, ɛn JavaSkript fayl bak fɔ rawnd di prɔjek strɔkchɔ. Rɔn di tin dɛn we de dɔŋ ya frɔm my-project, ɔ mek di fɔlda ɛn fayl strɔkchɔ we de dɔŋ ya wit yu an.

mkdir {src,src/js,src/scss}
touch src/index.html src/js/main.js src/scss/styles.scss vite.config.js

We yu dɔn, yu kɔmplit prɔjek fɔ tan lɛk dis:

my-project/
├── src/
│   ├── js/
│   │   └── main.js
│   └── scss/
│   |   └── styles.scss
|   └── index.html
├── package-lock.json
├── package.json
└── vite.config.js

Na dis tɛm, ɔltin de na di rayt ples, bɔt Vite nɔ go wok bikɔs wi nɔ dɔn ful-ɔp wi vite.config.jsyet.

Kɔnfigyut di Vite

Wit dipɛnsin dɛn we dɛn dɔn instɔl ɛn wi prɔjek fɔlda rɛdi fɔ wi fɔ stat fɔ kɔd, wi kin kɔnfigyut Vite naw ɛn rɔn wi prɔjek lokal wan.

Opin vite.config.jsinsay yu ɛditɔ. Sins i blank, wi go nid fɔ ad sɔm boilerplate kɔnfig to am so dat wi go ebul fɔ stat wi sava. Dis pat pan di kɔnfig tɛl Vite bin fɔ luk fɔ wi prɔjek in JavaSkript ɛn aw di divɛlɔpmɛnt sava fɔ biev (pul frɔm di srcfɔlda wit hot rilod).
```
const path = require('path')

export default {
  root: path.resolve(__dirname, 'src'),
  server: {
    port: 8080,
    hot: true
  }
}
```

Neks wi de ful-ɔp src/index.html. Dis na di HTML pej we Vite go lod na di brawza fɔ yuz di bundled CSS ɛn JS we wi go ad to am leta step dɛn.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap w/ Vite</title>
  </head>
  <body>
    <div class="container py-4 px-3 mx-auto">
      <h1>Hello, Bootstrap and Vite!</h1>
      <button class="btn btn-primary">Primary button</button>
    </div>
    <script type="module" src="./js/main.js"></script>
  </body>
</html>

Wi de inklud likl bit of Bootstrap styling ya wit di div class="container"en <button>so dat wi go si wen Bootstrap in CSS de lod bai Vite.

Naw wi nid wan npm skript fɔ rɔn Vite. Opin package.jsonɛn ad di startskript we de dɔŋ ya (yu fɔ dɔn ɔlrɛdi gɛt di tɛst skript). Wi go yuz dis skript fɔ stat wi lokal Vite dev sava.
```
{
  // ...
  "scripts": {
    "start": "vite",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
Ɛn fɔ dɔn, wi kin bigin Vite. Frɔm di my-projectfɔlda na yu tɛminal, rɔn da nyu npm skript de we dɛn dɔn ad:
```
npm start
```

Insay di nɛks ɛn las pat na dis gayd, wi go import ɔl di Bootstrap in CSS ɛn JavaSkript dɛn.

Impɔt bɔt di Bootstrap

Set ap Bootstrap in Sass import insay vite.config.js. Yu kɔnfigyushɔn fayl dɔn dɔn naw ɛn i fɔ mach di smɔl pat we de dɔŋ ya. Di onli nyu pat ya na di resolvesɛkshɔn—wi de yuz dis fɔ ad wan alias to wi sɔs fayl dɛn insay node_modulesfɔ mek di import dɛn simpul as wi ebul.

const path = require('path')

export default {
  root: path.resolve(__dirname, 'src'),
  resolve: {
    alias: {
      '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'),
    }
  },
  server: {
    port: 8080,
    hot: true
  }
}

Naw, lɛ wi import Bootstrap in CSS. Ad di wan dɛn we de dɔŋ ya to src/scss/styles.scssfɔ import ɔl di Bootstrap in sɔs Sass.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Yu kin impɔtɔt wi staylshit dɛn bak wan bay wan if yu want. Rid wi Sass import docs fɔ di ditel dɛn.
Neks wi lod di CSS ɛn import Bootstrap in JavaSkript. Ad di wan dɛn we de dɔŋ ya to src/js/main.jsfɔ lod di CSS ɛn import ɔl di Bootstrap in JS dɛn. Popper go import otomatik tru Bootstrap.
```
// Import our custom CSS
import '../scss/styles.scss'

// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
Yu kin impɔtɔt JavaSkript plɔgin dɛn bak wan bay wan as nid de fɔ kip bɔndɛl saiz dɛn dɔŋ:
```
import Alert from 'bootstrap/js/dist/alert';

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap';
```
Rid wi JavaSkript dɔks fɔ no mɔ bɔt aw fɔ yuz Bootstrap in plɔgin dɛn.
Ɛn yu dɔn dɔn! 🎉 Wit Bootstrap in sos Sass en JS ful lod, yu lokal divelopment sava shud luk laik dis naw.

Naw yu kin stat fɔ ad ɛni Bootstrap kɔmpɔnɛnt we yu want fɔ yuz. Mek shɔ se yu chɛk di kɔmplit Vite ɛgzampul projɛkt fɔ aw fɔ inklud ɔda kɔstɔm Sass ɛn ɔptimayz yu bild bay we yu import ɔl di pat dɛn na Bootstrap in CSS ɛn JS we yu nid.

Si sɔntin we rɔng ɔ we nɔ de igen ya? Duya opin wan isyu na GitHub . Nid ɛp fɔ sɔlv prɔblɛm dɛn? Sɔch ɔ stat fɔ tɔk bɔt na GitHub.