Bootstrap 和 Vite

使用 Vite 在專案中包含並組合 Bootstrap 的 CSS 和 JavaScript 的官方指南。

此頁面

想跳到最後嗎？從 twbs/examples 儲存庫下載此指南的原始碼和運作示範。您也可以在 StackBlitz 中開啟範例進行線上編輯。

設定

我們從頭開始使用 Bootstrap 建立一個 Vite 專案，因此在我們真正開始之前，有一些先決條件和前期步驟。此指南要求您已安裝 Node.js，並且熟悉終端機。

建立專案資料夾並設定 npm。我們將建立 my-project 資料夾，並使用 -y 參數初始化 npm，以避免它詢問我們所有互動式問題。
```
mkdir my-project && cd my-project
npm init -y
```
安裝 Vite。與我們的 Webpack 指南不同，這裡只有一個建置工具相依性。我們使用 --save-dev 來表示這個相依性僅供開發使用，不適用於生產。
```
npm i --save-dev vite
```
安裝 Bootstrap。現在我們可以安裝 Bootstrap。我們也會安裝 Popper，因為我們的下拉式選單、彈出視窗和工具提示依賴它來定位。如果您不打算使用這些元件，可以在這裡省略 Popper。
```
npm i --save bootstrap @popperjs/core
```
安裝其他相依性。除了 Vite 和 Bootstrap 之外，我們需要另一個相依性 (Sass) 來正確匯入和打包 Bootstrap 的 CSS。
```
npm i --save-dev sass
```

現在我們已經安裝並設定好所有必要的相依性，我們可以開始建立專案檔案和匯入 Bootstrap。

專案結構

我們已經建立了 my-project 資料夾並初始化了 npm。現在我們還會建立我們的 src 資料夾、樣式表和 JavaScript 檔案，以完善專案結構。從 my-project 執行以下指令，或手動建立下方顯示的資料夾和檔案結構。

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

完成後，您的完整專案應如下所示

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

在這個階段，所有內容都放在正確的位置，但 Vite 無法運作，因為我們尚未填寫我們的 vite.config.js。

設定 Vite

在安裝相依性且我們的專案資料夾已準備好讓我們開始編碼後，我們現在可以設定 Vite 並在本地端執行我們的專案。

在編輯器中開啟 vite.config.js。由於它是空白的，我們需要新增一些樣板設定檔，以便我們可以啟動伺服器。設定檔的這部分會告訴 Vite 在哪裡尋找專案的 JavaScript，以及開發伺服器應如何運作（從 src 資料夾中提取，並進行熱重載）。
```
import { resolve } from 'path'

export default {
  root: resolve(__dirname, 'src'),
  build: {
    outDir: '../dist'
  },
  server: {
    port: 8080
  }
}
```

接著我們填寫 src/index.html。這是 Vite 會在瀏覽器中載入的 HTML 頁面，以利用我們稍後會新增的已套件化 CSS 和 JS。

<!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>
    <script type="module" src="./js/main.js"></script>
  </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>
  </body>
</html>

我們在此處包含一點 Bootstrap 造型，使用 div class="container" 和 <button>，以便我們在 Vite 載入 Bootstrap 的 CSS 時看到。

現在我們需要一個 npm 腳本來執行 Vite。開啟 package.json 並新增下方顯示的 start 腳本（你應該已經有測試腳本）。我們將使用這個腳本來啟動本機 Vite 開發伺服器。
```
{
  // ...
  "scripts": {
    "start": "vite",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
最後，我們可以啟動 Vite。從終端機中的 my-project 資料夾執行新增加的 npm 腳本
```
npm start
```

在本指南的下一部分和最後一部分，我們將匯入 Bootstrap 的所有 CSS 和 JavaScript。

匯入 Bootstrap

匯入 Bootstrap 的 CSS。將下列內容新增到 src/scss/styles.scss 以匯入所有 Bootstrap 的 Sass 原始碼。
```
// Import all of Bootstrap's CSS
@import "bootstrap/scss/bootstrap";
```
如果你想要，也可以個別匯入我們的樣式表。閱讀我們的 Sass 匯入文件以取得詳細資訊。
接著我們載入 CSS 並匯入 Bootstrap 的 JavaScript。將下列內容新增到 src/js/main.js 以載入 CSS 並匯入所有 Bootstrap 的 JS。Popper 將透過 Bootstrap 自動匯入。
```
// Import our custom CSS
import '../scss/styles.scss'

// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
您也可以根據需要個別匯入 JavaScript 外掛程式，以減少套件大小
```
import Alert from 'bootstrap/js/dist/alert';

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap';
```
閱讀我們的 JavaScript 文件，進一步了解如何使用 Bootstrap 的外掛程式。
大功告成！🎉在 Bootstrap 的 Sass 和 JS 來源完全載入後，您的本機開發伺服器現在應如下所示

現在您可以開始新增任何您想使用的 Bootstrap 元件。務必查看完整的 Vite 範例專案，了解如何包含其他自訂 Sass，並透過僅匯入您需要的 Bootstrap CSS 和 JS 部分來最佳化您的建置。

發現這裡有任何錯誤或過時資訊嗎？請在 GitHub 上開啟一個議題。需要疑難排解協助嗎？在 GitHub 上搜尋或開始討論。