从零搭建 Bootstrap 项目开发环境
2026-05-15 ·
一个现代化的项目开发环境能显著提升开发效率。本文手把手教你搭建基于 Vite + Sass 的 Bootstrap 项目工作流。
1. 使用 Vite 模板
npm create vite@latest my-bootstrap-app -- --template vanilla
cd my-bootstrap-app
npm install bootstrap @popperjs/core sass
2. 项目结构
my-bootstrap-app/
├── src/
│ ├── scss/
│ │ ├── _variables.scss <- 自定义变量
│ │ └── main.scss <- 导入 Bootstrap
│ ├── js/
│ │ └── main.js
│ └── index.html
├── package.json
└── vite.config.js
3. 配置 vite.config.js
// vite.config.js
import { defineConfig } from 'vite'
export default defineConfig({
root: 'src',
build: {
outDir: '../dist'
},
server: {
port: 3000,
open: true
}
})
4. 主 SCSS 文件
// src/scss/main.scss
// 自定义变量
$primary: #6f42c1;
$border-radius: .5rem;
// 导入 Bootstrap
@import 'bootstrap/scss/bootstrap';
// 自定义样式
.hero {
background: linear-gradient(135deg, $primary, darken($primary, 10%));
}
5. 启动开发服务器
npm run dev
# 访问 http://localhost:3000
6. 生产构建
npm run build
# 输出到 dist/ 目录，可直接部署
Vite 内置了 Sass 编译、CSS 压缩和 JS 打包功能，无需额外配置即可用于 Bootstrap 项目。开发体验热更新速度极快。