bootstrap-vite

使用 Vite 搭建 Bootstrap 6

搭建一个使用 Vite 打包的 Bootstrap 6 项目。需要熟悉 Node.js 和终端。

工作流

• 第 1 步：设置 npm 并安装依赖
• 第 2 步：创建项目结构
• 第 3 步：配置 Vite
• 第 4 步：导入 Bootstrap 的 CSS 和 JS
• 第 5 步：验证

---

第 1 步：设置 npm 并安装依赖

1. 创建项目并初始化 npm：

   mkdir my-project && cd my-project
   npm init -y
   

2. 安装 Vite：

   npm i --save-dev vite
   

3. 安装 Bootstrap 及其可选的对等依赖（如果不使用菜单、弹出框或工具提示，请省略 @floating-ui/dom；如果不使用日期选择器，请省略 vanilla-calendar-pro）：

   npm i --save [email protected] @floating-ui/dom vanilla-calendar-pro
   

4. 安装 Sass 以编译 Bootstrap 源码：

   npm i --save-dev sass
   

---

第 2 步：创建项目结构

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

---

第 3 步：配置 Vite

1. vite.config.js：

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

2. src/index.html — 加载入口模块：

   <!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-solid theme-primary">Primary button</button>
       </div>
     </body>
   </html>
   

3. package.json — 添加启动脚本：

   {
     "scripts": {
       "start": "vite",
       "test": "echo \"Error: no test specified\" && exit 1"
     }
   }
   

4. 启动 Vite：

   npm start
   

---

第 4 步：导入 Bootstrap 的 CSS 和 JS

1. src/scss/styles.scss — 使用 @use 导入 Sass 源码（不要使用 @import）：

   // Import all of Bootstrap's CSS
   @use "bootstrap/scss/bootstrap";
   

   若要自定义，请覆盖 Bootstrap 的 CSS 令牌映射（$root-tokens、$*-tokens）——参见 自定义 › Sass。在 Sass 中，令牌名称不带前缀；Bootstrap 的 dist/CDN CSS 会通过 PostCSS 添加 --bs- 前缀，因此自行编译源码时，令牌名称会保持无前缀状态。

2. src/js/main.js — 加载 CSS 并导入 Bootstrap 的 JS。Floating UI 和 Vanilla Calendar Pro 会通过 Bootstrap 自动导入：

   // Import our custom CSS, then all of Bootstrap’s JS
   import '../scss/styles.scss'
   import * as bootstrap from 'bootstrap'
   

   仅导入所需的插件，以控制打包体积：

   import { Tooltip, Toast, Popover } from 'bootstrap'
   

---

第 5 步：验证

1. 运行 npm start 并打开 http://localhost:8080 — .container 和 .btn-solid.theme-primary 按钮应已应用样式。
2. 确认浏览器控制台中没有模块解析错误（Bootstrap、Floating UI、Vanilla Calendar Pro）。
3. 触发一个 JS 组件（工具提示/对话框），确认 JS 包正常工作。
4. Bootstrap 6 需要支持 oklch() 和 color-mix() 的浏览器。

若要生成仅导入所用 Bootstrap 部分的优化构建，请参阅 twbs/examples Vite 项目。