Bootstrap & Vite

Jagorar hukuma don haɗawa da haɗa Bootstrap's CSS da JavaScript a cikin aikin ku ta amfani da Vite.

A wannan shafi

Kuna so ku tsallake zuwa ƙarshe? Zazzage lambar tushe da demo ɗin aiki don wannan jagorar daga ma'ajiyar twbs/misali . Hakanan zaka iya buɗe misali a cikin StackBlitz don gyara kai tsaye.

Saita

Muna gina aikin Vite tare da Bootstrap daga karce, don haka akwai wasu abubuwan da ake buƙata da matakan gaba kafin mu fara da gaske. Wannan jagorar yana buƙatar shigar da Node.js da wasu saba da tasha.

Ƙirƙiri babban fayil ɗin aikin kuma saita npm. Za mu ƙirƙiri my-projectbabban fayil ɗin kuma mu fara npm tare da -yhujja don guje wa tambayar mu duk tambayoyin mu'amala.
```
mkdir my-project && cd my-project
npm init -y
```
Shigar Vite. Ba kamar jagorar fakitin gidan yanar gizon mu ba, akwai dogaron kayan aikin gini guda ɗaya kawai anan. Muna amfani --save-devda alamar cewa wannan dogara ne kawai don amfanin ci gaba ba don samarwa ba.
```
npm i --save-dev vite
```
Shigar Bootstrap. Yanzu za mu iya shigar da Bootstrap. Za mu kuma shigar da Popper tun da zazzagewar mu, popovers, da tukwici na kayan aiki sun dogara da shi don matsayinsu. Idan baku shirya yin amfani da waɗannan abubuwan haɗin gwiwa ba, zaku iya barin Popper anan.
```
npm i --save bootstrap @popperjs/core
```
Shigar ƙarin dogaro. Baya ga Vite da Bootstrap, muna buƙatar wani abin dogaro (Sass) don shigo da kaya daidai da haɗa CSS na Bootstrap.
```
npm i --save-dev sass
```

Yanzu da muke da duk abubuwan dogaro da aka shigar da saiti, za mu iya zuwa aiki ƙirƙirar fayilolin aikin da shigo da Bootstrap.

Tsarin aikin

Mun riga mun ƙirƙiri my-projectbabban fayil ɗin kuma mun fara npm. Yanzu kuma za mu ƙirƙiri srcbabban fayil ɗin mu, salon rubutu, da fayil ɗin JavaScript don zagaye tsarin aikin. Gudun waɗannan abubuwan daga my-project, ko ƙirƙirar babban fayil da tsarin fayil da hannu wanda aka nuna a ƙasa.

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

Idan kun gama, cikakken aikinku yakamata yayi kama da haka:

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

A wannan lokacin, komai yana cikin wurin da ya dace, amma Vite ba zai yi aiki ba saboda ba mu cika namu vite.config.jsba tukuna.

Sanya Vite

Tare da shigar abubuwan dogaro da babban fayil ɗin aikinmu a shirye don mu fara coding, yanzu za mu iya saita Vite da gudanar da aikinmu a gida.

Bude vite.config.jsa cikin editan ku. Tunda babu komai, za mu buƙaci ƙara wasu saitunan tukunyar jirgi don mu fara sabar mu. Wannan ɓangaren saitin yana gaya wa Vite su nemo JavaScript na aikin mu da kuma yadda uwar garken haɓaka ya kamata ta kasance (cire daga srcbabban fayil tare da sakewa mai zafi).
```
const path = require('path')

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

Na gaba mu cika src/index.html. Wannan shine shafin HTML Vite zai loda a cikin mazuruftan don amfani da CSS da aka haɗe da JS za mu ƙara masa a matakai na gaba.

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

Muna haɗa ɗan ƙaramin salo na Bootstrap anan tare da div class="container"kuma <button>don mu ga lokacin da Bootstrap's CSS ke ɗorawa ta Vite.

Yanzu muna buƙatar rubutun npm don gudanar da Vite. Buɗe package.jsonkuma ƙara startrubutun da aka nuna a ƙasa (ya kamata ku riga kuna da rubutun gwaji). Za mu yi amfani da wannan rubutun don fara uwar garken Vite dev na gida.
```
{
  // ...
  "scripts": {
    "start": "vite",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
Kuma a ƙarshe, za mu iya fara Vite. Daga my-projectbabban fayil ɗin da ke tashar tashar ku, gudanar da sabon rubutun npm da aka ƙara:
```
npm start
```

A sashe na gaba da na ƙarshe zuwa wannan jagorar, za mu shigo da duk Bootstrap's CSS da JavaScript.

Shigo Bootstrap

Saita shigo da Bootstrap's Sass a cikin vite.config.js. Fayil ɗin daidaitawar ku yanzu ya cika kuma yakamata ya dace da snippet ɗin da ke ƙasa. Sabuwar sashi kawai anan shine resolvesashin - muna amfani da wannan don ƙara wani laƙabi zuwa fayilolin tushen mu a ciki node_modulesdon ci gaba da shigo da kaya cikin sauƙi gwargwadon yiwuwa.
```
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
  }
}
```
Yanzu, bari mu shigo da Bootstrap's CSS. Ƙara waɗannan src/scss/styles.scssdon shigo da duk tushen Bootstrap Sass.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Hakanan kuna iya shigo da takaddun salon mu daban-daban idan kuna so. Karanta takaddun shigo da Sass ɗin mu don cikakkun bayanai.
Na gaba muna loda CSS kuma mu shigo da Bootstrap's JavaScript. Ƙara waɗannan src/js/main.jsdon loda CSS kuma shigo da duk Bootstrap's JS. Za a shigo da Popper ta atomatik ta Bootstrap.
```
// Import our custom CSS
import '../scss/styles.scss'

// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
Hakanan zaka iya shigo da plugins na JavaScript daban-daban kamar yadda ake buƙata don kiyaye girma da yawa:
```
import Alert from 'bootstrap/js/dist/alert';

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap';
```
Karanta takardun mu na JavaScript don ƙarin bayani kan yadda ake amfani da plugins na Bootstrap.
Kuma kun gama! 🎉 Tare da tushen Bootstrap Sass da JS cikakke an ɗora su, uwar garken ci gaban gida ya kamata yanzu yayi kama da wannan.

Yanzu zaku iya fara ƙara kowane kayan aikin Bootstrap da kuke son amfani da su. Tabbatar duba cikakken aikin misalin Vite don yadda ake haɗa ƙarin Sass na al'ada da haɓaka ginin ku ta shigo da sassan Bootstrap's CSS da JS waɗanda kuke buƙata kawai.

Ka ga wani abu ba daidai ba ko ya wuce a nan? Da fatan za a buɗe batu akan GitHub . Kuna buƙatar taimako don magance matsala? Bincika ko fara tattaunawa akan GitHub.