bootstrap-parcel

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Bootstrap 6 with Parcel

使用 Parcel 搭建 Bootstrap 6 项目

Set up a Bootstrap 6 project bundled with Parcel. Parcel is zero-config and auto-installs language transformers (like Sass) as it detects them. Requires Node.js and terminal familiarity.

搭建由 Parcel 打包的 Bootstrap 6 项目。Parcel 是零配置工具，会自动检测并安装对应的语言转换器（例如 Sass）。需要你具备 Node.js 基础和终端使用经验。

Workflow

工作流程

Step 1: Set up npm and install dependencies

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

Create the project and initialize npm:

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

Install Parcel:
sh
```
npm i --save-dev parcel
```
Install Bootstrap and its optional peer dependencies (omit
```
@floating-ui/dom
```
if not using menus/popovers/tooltips; omit
```
vanilla-calendar-pro
```
if not using the datepicker):
sh
```
npm i --save bootstrap@6.0.0-alpha.1 @floating-ui/dom vanilla-calendar-pro
```

Parcel will auto-install the Sass plugin when it detects

.scss

. To install it manually:

npm i --save-dev @parcel/transformer-sass

创建项目并初始化 npm：

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

安装 Parcel：
sh
```
npm i --save-dev parcel
```
安装 Bootstrap 及其可选 peer 依赖（如果不使用菜单/弹出框/工具提示，可省略
```
@floating-ui/dom
```
；如果不使用日期选择器，可省略
```
vanilla-calendar-pro
```
）：
sh
```
npm i --save bootstrap@6.0.0-alpha.1 @floating-ui/dom vanilla-calendar-pro
```

Parcel 检测到

.scss

文件时会自动安装 Sass 插件。如需手动安装，可执行：

npm i --save-dev @parcel/transformer-sass

。

Step 2: Create the project structure

步骤2：创建项目结构

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

Target layout (Parcel needs no config file):

text

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

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

目标目录结构（Parcel 无需配置文件）：

text

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

Step 3: Configure Parcel

步骤3：配置 Parcel

src/index.html

— link the Sass and JS entry points directly (Parcel resolves and bundles them):

html

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

package.json

— add the start script:

json

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

Start Parcel:
sh
```
npm start
```

src/index.html

—— 直接链接 Sass 和 JS 入口文件（Parcel 会解析并打包它们）：

html

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

package.json

—— 添加启动脚本：

json

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

启动 Parcel：
sh
```
npm start
```

Step 4: Import Bootstrap's CSS and JS

步骤4：引入 Bootstrap 的 CSS 和 JS

```
src/scss/styles.scss
```
— import the source Sass with
```
@use
```
(never
```
@import
```
):
scss
```
// Import all of Bootstrap's CSS
@use "bootstrap/scss/bootstrap";
```
To customize, override Bootstrap's CSS token maps (
```
$root-tokens
```
,
```
$*-tokens
```
) — see Customize › Sass. Token names are written unprefixed in Sass; Bootstrap's dist/CDN CSS adds the
```
--bs-
```
prefix via PostCSS, so compiling the source yourself keeps them unprefixed.
```
src/js/main.js
```
— import Bootstrap's JS. Floating UI and Vanilla Calendar Pro are imported automatically through Bootstrap:
js
```
// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
Import only the plugins you need to keep bundle sizes down:
js
```
import { Tooltip, Toast, Popover } from 'bootstrap'
```

```
src/scss/styles.scss
```
—— 使用
```
@use
```
引入 Sass 源文件（切勿使用
@import
）：
scss
```
// Import all of Bootstrap's CSS
@use "bootstrap/scss/bootstrap";
```
如需自定义样式，可覆盖 Bootstrap 的 CSS token 映射（
```
$root-tokens
```
、
```
$*-tokens
```
）—— 参见自定义 › Sass。Token 名称在 Sass 中没有前缀；Bootstrap 的发行版/CDN CSS 会通过 PostCSS 添加
```
--bs-
```
前缀，因此自行编译源文件时 token 不会带此前缀。
```
src/js/main.js
```
—— 引入 Bootstrap 的 JS。Floating UI 和 Vanilla Calendar Pro 会通过 Bootstrap 自动引入：
js
```
// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
仅引入你需要的插件，以减小打包体积：
js
```
import { Tooltip, Toast, Popover } from 'bootstrap'
```

Step 5: Verify

步骤5：验证

Run
```
npm start
```
and open the served URL — the
```
.container
```
and
```
.btn-solid.theme-primary
```
button should be styled.
Confirm Parcel installed the Sass transformer (no
```
.scss
```
build errors) and the console is free of module errors.
Trigger a JS component (tooltip/dialog) to confirm the JS bundle works.
Bootstrap 6 requires a browser that supports
```
oklch()
```
and
```
color-mix()
```
.

For an optimized build that imports only the parts of Bootstrap you use, see the twbs/examples Parcel project.

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

如需实现按需引入 Bootstrap 模块的优化构建，可参考 twbs/examples Parcel 项目。