Bootstrap & Vite

Le ta'iala aloa'ia pe fa'afefea ona fa'aofi ma fa'apipi'i le Bootstrap's CSS ma le JavaScript i lau galuega fa'aaoga Vite.

I luga o lenei itulau

E te manaʻo e faaseʻe i le iuga? La'u mai le code source ma le demo galue mo lenei ta'iala mai le twbs/examples repository . E mafai foi ona e tatalaina le faʻataʻitaʻiga i StackBlitz mo le faʻataʻitaʻiga ola.

Seti

O loʻo matou fausiaina se Vite poloketi ma Bootstrap mai le amataga, o loʻo i ai nisi o mea e manaʻomia muamua ma luma laʻasaga aʻo leʻi mafai ona tatou amata. O lenei taʻiala e manaʻomia oe e faʻapipiʻi Node.js ma faʻamasani i le laina.

Fausia se faila poloketi ma seti npm. Matou te fatuina le my-projectfaila ma amata le npm ma le -yfinauga e aloese ai mai le fesili mai ia i matou uma fesili fegalegaleai.
```
mkdir my-project && cd my-project
npm init -y
```
Faʻapipiʻi Vite. E le pei o la matou Webpack guide, e na'o le tasi le mea faigaluega fa'alagolago iinei. Matou te faʻaaogaina --save-deve faʻamaonia ai o lenei faʻalagolago e naʻo le faʻaogaina o le atinaʻe ae le o le gaosiga.
```
npm i --save-dev vite
```
Fa'apipi'i le Bootstrap. O lea e mafai ona matou faʻapipiʻi Bootstrap. Matou te faʻapipiʻi foi Popper talu ai o matou pa'ū, popovers, ma meafaigaluega e faʻalagolago i ai mo latou tulaga. Afai e te le fuafua i le faʻaaogaina o na vaega, e mafai ona e aveese Popper iinei.
```
npm i --save bootstrap @popperjs/core
```
Fa'aopoopo le fa'alagolago. E le gata i le Vite ma le Bootstrap, matou te manaʻomia se isi faʻalagolago (Sass) e faʻapipiʻi lelei ma faʻapipiʻi le CSS Bootstrap.
```
npm i --save-dev sass
```

I le taimi nei ua uma ona matou faʻapipiʻiina ma faʻapipiʻi faʻalagolago, e mafai ona matou galulue e fatuina faila faila ma faʻaulufale mai Bootstrap.

Fa'atulagaina o le poloketi

Ua uma ona matou fatuina le my-projectfaila ma amataina npm. O lea o le a matou faia foi la matou srcfaila, sitaili, ma le faila JavaScript e faʻataʻamilo ai le fausaga o le poloketi. Fa'agasolo mea nei mai le my-project, po'o le faia ma le lima le faila ma le faila faila o lo'o fa'aalia i lalo.

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

A mae'a, e tatau ona fa'apenei lau galuega atoa:

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

I le taimi nei, o loʻo i ai mea uma i le nofoaga saʻo, ae o le a le aoga Vite ona e leʻi faʻatumu a matou vite.config.js.

Fa'atonu Vite

Fa'atasi ai ma fa'amoemoega fa'apipi'i ma ua sauni le matou faila fa'atino mo matou e amata fa'ailoga, ua mafai nei ona matou fa'atulagaina le Vite ma fa'atautaia la matou poloketi i le lotoifale.

Tatala vite.config.jsi lau faatonu. Talu ai e avanoa, e mana'omia le fa'aopoopoina o se fa'apalapala fa'apipi'i i ai ina ia mafai ai ona amata la matou 'au'aunaga. O lenei vaega o le config e taʻu atu ia Vite e suʻe le JavaScript a le matou poloketi ma pe faʻafefea ona amio le server o le atinaʻe (toso mai le srcpusa ma toe uta vevela).
```
const path = require('path')

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

Ona sosoo ai lea ma le faatumu src/index.html. Ole itulau HTML lea ole a utaina e Vite ile su'esu'ega e fa'aoga ai le CSS ma le JS fa'apipi'i matou te fa'aopoopo i ai i la'asaga mulimuli ane.

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

O lo'o matou fa'aofiina sina sitaili a Bootstrap iinei ma le div class="container"ma <button>ina ia matou va'ai pe a utaina e Vite le CSS Bootstrap.

O lea matou te manaʻomia se npm script e taʻavale Vite. Tatala package.jsonma faʻaopopo le startfaʻamatalaga o loʻo faʻaalia i lalo (e tatau ona i ai lau suʻega suʻega). Matou te fa'aogaina lenei tusitusiga e amata ai la matou Vite dev server.
```
{
  // ...
  "scripts": {
    "start": "vite",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
Ma le mea mulimuli, e mafai ona tatou amata Vite. Mai le my-projectfaʻailoga i lau faʻailoga, faʻataʻitaʻi le tusi fou fou npm:
```
npm start
```

I le isi vaega mulimuli ma le vaega mulimuli i lenei taʻiala, matou te faʻaulufaleina uma mai le Bootstrap CSS ma le JavaScript.

Fa'aulufale mai Bootstrap

Seti Bootstrap's Sass import in vite.config.js. Ua mae'a nei lau faila fa'atulagaina ma e tatau ona fetaui ma le snippet o lo'o i lalo. Pau lava le vaega fou iinei o le resolvevaega-matou te faʻaogaina lenei mea e faʻapipiʻi ai se igoa i a matou faila faila i totonu node_modulese faʻafaigofie ai le faʻaulufale mai.
```
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
  }
}
```
Ia, tatou fa'aulufale mai le Bootstrap's CSS. Fa'aopoopo mea nei i src/scss/styles.scssle fa'aulufale uma mai o le puna a Bootstrap Sass.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
E mafai fo'i ona e fa'aulufale mai a matou sitaili ta'itasi pe a e mana'o ai. Faitau a matou pepa fa'aulufale mai Sass mo fa'amatalaga.
O le isi matou utaina le CSS ma fa'aulufale mai le Bootstrap's JavaScript. Fa'aopoopo mea nei i src/js/main.jsle utaina o le CSS ma fa'aulufale uma mai le Bootstrap's JS. Popper o le a otometi lava ona faaulufale mai e ala i Bootstrap.
```
// Import our custom CSS
import '../scss/styles.scss'

// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
E mafai fo'i ona e fa'aulufale mai fa'apipi'i JavaScript ta'ito'atasi pe a mana'omia e fa'atumauina i lalo le lapo'a:
```
import Alert from 'bootstrap/js/dist/alert';

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap';
```
Faitau a matou JavaScript docs mo nisi faʻamatalaga ile faʻaogaina o plugini a Bootstrap.
Ma ua uma oe! 🎉 Faatasi ai ma le puna a Bootstrap Sass ma JS ua uma ona utaina, ua tatau nei ona foliga faʻapea lau 'auʻaunaga atinaʻe i le lotoifale.

Ole taimi nei e mafai ona e amata fa'aopoopo so'o se vaega Bootstrap e te mana'o e fa'aoga. Ia mautinoa e siaki le Vite faʻataʻitaʻiga poloketi atoa pe faʻafefea ona faʻapipiʻi faʻaopoopoga masani Sass ma faʻalelei lau faufale e ala i le faʻaulufaleina mai na o vaega ole Bootstrap's CSS ma JS e te manaʻomia.

Va'ai i se mea sese pe tuai iinei? Faamolemole tatala se mataupu ile GitHub . Manaomia se fesoasoani e foia ai faafitauli? Su'e pe amata se talanoaga ile GitHub.