bootstrap-parcel

使用 Parcel 配置 Bootstrap 6

使用 Parcel 打包 Bootstrap 6 项目。Parcel 无需配置，并会在检测到 Sass 等语言时自动安装相应的转换器。需要安装 Node.js，并熟悉终端操作。

工作流

• 步骤 1：设置 npm 并安装依赖
• 步骤 2：创建项目结构
• 步骤 3：配置 Parcel（HTML + npm 脚本）
• 步骤 4：导入 Bootstrap 的 CSS 和 JS
• 步骤 5：验证

---

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

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

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

2. 安装 Parcel：

   npm i --save-dev parcel
   

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

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

Parcel 检测到 .scss 文件时会自动安装 Sass 插件。如需手动安装：npm i --save-dev @parcel/transformer-sass。

---

步骤 2：创建项目结构

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

目标布局（Parcel 无需配置文件）：

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

---

步骤 3：配置 Parcel

1. src/index.html — 直接链接 Sass 和 JS 入口文件（Parcel 会解析并打包它们）：

   <!doctype html>
   <html lang="en">
     <head>
       <meta charset="utf-8">
       <meta name="viewport" content="width=device-width, initial-scale=1">
       <title>Bootstrap w/ Parcel</title>
       <link rel="stylesheet" href="scss/styles.scss">
       <script type="module" src="js/main.js"></script>
     </head>
     <body>
       <div class="container py-4 px-3 mx-auto">
         <h1>Hello, Bootstrap and Parcel!</h1>
         <button class="btn-solid theme-primary">Primary button</button>
       </div>
     </body>
   </html>
   

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

   {
     "scripts": {
       "start": "parcel serve src/index.html --public-url / --dist-dir dist",
       "test": "echo \"Error: no test specified\" && exit 1"
     }
   }
   

3. 启动 Parcel：

   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 — 导入 Bootstrap 的 JS。Bootstrap 会自动导入 Floating UI 和 Vanilla Calendar Pro：

   // Import all of Bootstrap's JS
   import * as bootstrap from 'bootstrap'
   

   仅导入所需的插件，以减小打包体积：

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

---

步骤 5：验证

1. 运行 npm start 并打开服务提供的 URL — .container 和 .btn-solid.theme-primary 按钮应已应用样式。
2. 确认 Parcel 已安装 Sass 转换器（没有 .scss 构建错误），且控制台没有模块错误。
3. 触发一个 JS 组件（工具提示/对话框），确认 JS 包正常工作。
4. Bootstrap 6 需要浏览器支持 oklch() 和 color-mix()。

如需优化构建并仅导入所用的 Bootstrap 部分，请参见 twbs/examples Parcel 项目。