Bootstrap & Vite

Zvanični vodič kako da uključite i povežete Bootstrap CSS i JavaScript u svoj projekat koristeći Vite.

Na ovoj stranici

Želite li preskočiti do kraja? Preuzmite izvorni kod i radni demo za ovaj vodič iz twbs/examples spremišta . Također možete otvoriti primjer u StackBlitzu za uređivanje uživo.

Postaviti

Gradimo Vite projekat s Bootstrapom od nule, tako da postoje neki preduslovi i prvi koraci prije nego što zaista počnemo. Ovaj vodič zahtijeva od vas da imate instaliran Node.js i određeno poznavanje terminala.

Kreirajte direktorij projekta i postavite npm. Kreiraćemo my-projectfasciklu i inicijalizovati npm sa -yargumentom kako bismo izbegli da nam postavlja sva interaktivna pitanja.
```
mkdir my-project && cd my-project
npm init -y
```
Instalirajte Vite. Za razliku od našeg Webpack vodiča, ovdje postoji samo jedna ovisnost o alatu za izradu. Koristimo --save-devda signaliziramo da je ova ovisnost samo za razvojnu upotrebu, a ne za proizvodnju.
```
npm i --save-dev vite
```
Instalirajte Bootstrap. Sada možemo instalirati Bootstrap. Također ćemo instalirati Popper jer naši padajući menii, iskačući oglasi i opisi alata zavise od toga za njihovo pozicioniranje. Ako ne planirate koristiti te komponente, ovdje možete izostaviti Poppera.
```
npm i --save bootstrap @popperjs/core
```
Instalirajte dodatnu ovisnost. Pored Vite-a i Bootstrapa, potrebna nam je još jedna zavisnost (Sass) da pravilno uvezemo i povežemo Bootstrap-ov CSS.
```
npm i --save-dev sass
```

Sada kada imamo instalirane i postavljene sve potrebne ovisnosti, možemo pristupiti stvaranju projektnih datoteka i uvozu Bootstrapa.

Struktura projekta

Već smo kreirali my-projectfolder i inicijalizirali npm. Sada ćemo također kreirati našu srcmapu, stylesheet i JavaScript datoteku kako bismo zaokružili strukturu projekta. Pokrenite sljedeće iz my-project, ili ručno kreirajte mapu i strukturu datoteka prikazanu ispod.

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

Kada završite, vaš kompletan projekat bi trebao izgledati ovako:

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

U ovom trenutku sve je na pravom mjestu, ali Vite neće raditi jer još nismo popunili naše vite.config.js.

Konfigurišite Vite

Uz instalirane ovisnosti i našu mapu projekta koja je spremna za početak kodiranja, sada možemo konfigurirati Vite i pokrenuti naš projekt lokalno.

Otvorite vite.config.jsu svom uređivaču. Pošto je prazan, moraćemo da mu dodamo neku šablonsku konfiguraciju kako bismo mogli da pokrenemo naš server. Ovaj dio konfiguracije govori Vite-u da traži JavaScript našeg projekta i kako bi se razvojni server trebao ponašati (povlačenje iz srcfoldera sa vrućim ponovnim učitavanjem).
```
const path = require('path')

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

Zatim popunjavamo src/index.html. Ovo je HTML stranica koju će Vite učitati u pretraživač kako bi koristio CSS i JS koji ćemo joj dodati u kasnijim koracima.

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

Ovdje uključujemo malo Bootstrap stila sa div class="container"i <button>tako da vidimo kada je Bootstrap CSS učitan od strane Vitea.

Sada nam je potrebna npm skripta za pokretanje Vite-a. Otvorite package.jsoni dodajte startskriptu prikazanu ispod (trebalo bi da već imate testnu skriptu). Koristit ćemo ovu skriptu za pokretanje našeg lokalnog Vite dev servera.
```
{
  // ...
  "scripts": {
    "start": "vite",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
I konačno, možemo pokrenuti Vite. Iz my-projectfoldera na vašem terminalu pokrenite tu novododatu npm skriptu:
```
npm start
```

U sledećem i poslednjem odeljku ovog vodiča, mi ćemo uvesti sve Bootstrapove CSS i JavaScript.

Import Bootstrap

Postavite Bootstrap-ov Sass uvoz u vite.config.js. Vaša konfiguracijska datoteka je sada završena i trebala bi odgovarati isječku ispod. Jedini novi dio ovdje je resolveodjeljak – koristimo ga za dodavanje pseudonima našim izvornim datotekama unutra node_moduleskako bi uvoz bio što jednostavniji.

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

Sada, hajde da uvezemo Bootstrap-ov CSS. Dodajte sljedeće u src/scss/styles.scssda uvezete sav izvorni Sass Bootstrapa.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Također možete uvesti naše stilove pojedinačno ako želite. Pročitajte naše Sass uvozne dokumente za detalje.
Zatim učitavamo CSS i uvozimo Bootstrap-ov JavaScript. Dodajte sljedeće u src/js/main.jsda učitate CSS i uvezete sav Bootstrap-ov JS. Popper će biti automatski uvezen putem Bootstrapa.
```
// Import our custom CSS
import '../scss/styles.scss'

// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
Također možete uvesti JavaScript dodatke pojedinačno po potrebi kako biste smanjili veličinu paketa:
```
import Alert from 'bootstrap/js/dist/alert';

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap';
```
Pročitajte naše JavaScript dokumente za više informacija o tome kako koristiti Bootstrap dodatke.
I gotovi ste! 🎉 Kada su izvorni Sass i JS Bootstrap potpuno učitani, vaš lokalni razvojni server bi sada trebao izgledati ovako.

Sada možete početi da dodajete sve komponente Bootstrapa koje želite da koristite. Obavezno provjerite kompletan primjer projekta Vite kako da uključite dodatni prilagođeni Sass i optimizirate svoju konstrukciju uvozom samo dijelova Bootstrap-ovog CSS-a i JS-a koji su vam potrebni.

Vidite ovdje nešto pogrešno ili zastarjelo? Molimo otvorite problem na GitHubu . Trebate pomoć u rješavanju problema? Pretražite ili započnite diskusiju na GitHubu.