bootstrap-vite

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Bootstrap 6 with Vite

Bootstrap 6 搭配 Vite 搭建教程

Set up a Bootstrap 6 project bundled with Vite. Requires Node.js and terminal familiarity.

使用 Vite 打包搭建 Bootstrap 6 项目。需要具备 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 Vite:
sh
```
npm i --save-dev vite
```
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
```
Install Sass to compile Bootstrap's source:
sh
```
npm i --save-dev sass
```

创建项目并初始化npm：

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

安装Vite：
sh
```
npm i --save-dev vite
```
安装Bootstrap及其可选对等依赖（如果不使用菜单/弹出框/工具提示，可省略
```
@floating-ui/dom
```
；如果不使用日期选择器，可省略
```
vanilla-calendar-pro
```
）：
sh
```
npm i --save bootstrap@6.0.0-alpha.1 @floating-ui/dom vanilla-calendar-pro
```
安装Sass以编译Bootstrap源文件：
sh
```
npm i --save-dev 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 vite.config.js

Target layout:

text

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

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

目标目录结构：

text

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

Step 3: Configure Vite

步骤3：配置Vite

vite.config.js

import path from 'path'

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

src/index.html

— load the entry module:

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>

package.json

— add the start script:

json

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

Start Vite:
sh
```
npm start
```

vite.config.js

：

import path from 'path'

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

src/index.html

— 加载入口模块：

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>

package.json

— 添加启动脚本：

json

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

启动Vite：
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

— load the CSS and import Bootstrap's JS. Floating UI and Vanilla Calendar Pro are imported automatically through Bootstrap:

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

Import only the plugins you need to keep bundle sizes down:

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令牌映射（
```
$root-tokens
```
、
```
$*-tokens
```
）——参见自定义 › Sass。Sass中的令牌名称无前缀；Bootstrap的dist/CDN版本CSS会通过PostCSS添加
```
--bs-
```
前缀，因此自行编译源文件时令牌不会带此前缀。

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'

Step 5: Verify

步骤5：验证

Run

npm start

and open

http://localhost:8080

— the

.container

and

.btn-solid.theme-primary

button should be styled.

Confirm the browser console is free of module-resolution errors (Bootstrap, Floating UI, Vanilla Calendar Pro).
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 Vite project.

执行

npm start

并打开

http://localhost:8080

—

.container

容器和

.btn-solid.theme-primary

按钮应已应用样式。

确认浏览器控制台无模块解析错误（涉及Bootstrap、Floating UI、Vanilla Calendar Pro）。
触发一个JS组件（工具提示/对话框）以确认JS打包文件正常运行。
Bootstrap 6要求浏览器支持
```
oklch()
```
和
```
color-mix()
```
。

如需实现仅引入所用Bootstrap模块的优化构建，请参考twbs/examples Vite项目。