Bootstrap & Vite

Službeni vodič za uključivanje i spajanje Bootstrapovog CSS-a i JavaScripta u vaš projekt pomoću Vitea.

Na ovoj stranici

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

Postaviti

Gradimo Vite projekt s Bootstrapom od nule, tako da postoje neki preduvjeti i početni koraci prije nego što stvarno počnemo. Ovaj vodič zahtijeva da imate instaliran Node.js i određeno poznavanje terminala.

Stvorite mapu projekta i postavite npm. Stvorit ćemo my-projectmapu i inicijalizirati npm s -yargumentom kako bismo izbjegli 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 alata za izradu. Koristimo --save-devkako bismo signalizirali 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 izbornici, skočni prozori i opisi alata ovise o njemu za njihovo pozicioniranje. Ako ne planirate koristiti te komponente, ovdje možete izostaviti Popper.
```
npm i --save bootstrap @popperjs/core
```
Instalirajte dodatnu ovisnost. Uz Vite i Bootstrap, potrebna nam je još jedna ovisnost (Sass) za pravilan uvoz i spajanje Bootstrapovog CSS-a.
```
npm i --save-dev sass
```

Sada kada smo instalirali i postavili sve potrebne ovisnosti, možemo krenuti s radom na izradi projektnih datoteka i uvozu Bootstrapa.

Struktura projekta

Već smo stvorili my-projectmapu i inicijalizirali npm. Sada ćemo također stvoriti našu srcmapu, stilsku tablicu i JavaScript datoteku kako bismo zaokružili strukturu projekta. Pokrenite sljedeće iz my-projectili ručno stvorite mapu i strukturu datoteke prikazanu u nastavku.

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 projekt trebao bi 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 ispunili naš vite.config.js.

Konfigurirajte Vite

S instaliranim ovisnostima i mapom našeg projekta spremnom za početak kodiranja, sada možemo konfigurirati Vite i pokrenuti naš projekt lokalno.

Otvorite vite.config.jsu uređivaču. Budući da je prazan, morat ćemo mu dodati neku standardnu konfiguraciju kako bismo mogli pokrenuti naš poslužitelj. Ovaj dio konfiguracije govori Viteu da traži JavaScript našeg projekta i kako bi se razvojni poslužitelj trebao ponašati (povlačenje iz srcmape s 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 preglednik kako bi iskoristio CSS i JS u paketu koje ć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 Bootstrapovog stila s div class="container"i <button>kako bismo vidjeli kada Vite učitava Bootstrapov CSS.

Sada nam treba npm skripta za pokretanje Vitea. Otvorite package.jsoni dodajte startskriptu prikazanu u nastavku (trebali biste već imati testnu skriptu). Koristit ćemo ovu skriptu za pokretanje našeg lokalnog Vite dev poslužitelja.
```
{
  // ...
  "scripts": {
    "start": "vite",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
I konačno, možemo pokrenuti Vite. Iz my-projectmape na vašem terminalu pokrenite tu novododanu npm skriptu:
```
npm start
```

U sljedećem i posljednjem odjeljku ovog vodiča uvest ćemo sav Bootstrapov CSS i JavaScript.

Uvezi Bootstrap

Postavite Bootstrapov Sass uvoz u vite.config.js. Vaša je konfiguracijska datoteka sada dovrš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 uvezimo Bootstrapov CSS. Dodajte sljedeće za src/scss/styles.scssuvoz svih Bootstrapovih izvora Sass.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Također možete pojedinačno uvesti naše tablice stilova ako želite. Za pojedinosti pročitajte naše Sass uvozne dokumente .
Zatim učitavamo CSS i uvozimo Bootstrapov JavaScript. Dodajte sljedeće za src/js/main.jsučitavanje CSS-a i uvoz svih Bootstrapovih JS-ova. Popper će se automatski uvesti 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 pojedinačno uvesti JavaScript dodatke prema 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 Bootstrapove dodatke.
I gotovi ste! 🎉 S punim učitavanjem Bootstrapovog izvornog koda Sass i JS, vaš bi lokalni razvojni poslužitelj sada trebao izgledati ovako.

Sada možete početi dodavati sve Bootstrap komponente koje želite koristiti. Obavezno provjerite cjeloviti projekt Vite primjera kako uključiti dodatni prilagođeni Sass i optimizirati svoju izgradnju uvozom samo dijelova Bootstrapovog CSS-a i JS-a koji su vam potrebni.

Ovdje vidite nešto pogrešno ili zastarjelo? Otvorite problem na GitHubu . Trebate li pomoć u rješavanju problema? Pretražite ili započnite raspravu na GitHubu.