bootstrap-npm

使用 npm 引导配置 Bootstrap 6

使用 npm 命令行工具设置 Bootstrap 6 项目，将 Sass 编译为 CSS，无需 JavaScript 打包器。Bootstrap 预构建的 JS bundle 通过 <script> 标签直接加载。需要熟悉 Node.js 和终端操作。

工作流

• 步骤 1：设置 npm 并安装依赖项
• 步骤 2：创建项目结构
• 步骤 3：配置 npm 脚本和配置文件
• 步骤 4：导入 Bootstrap 的 Sass
• 步骤 5：验证

---

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

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

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

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

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

3. 安装用于编译和后处理 CSS 的工具：

   npm i --save-dev autoprefixer postcss postcss-cli sass
   

4. 安装本地开发工具（监视文件、运行脚本、提供服务、代码检查）：

   npm i --save-dev nodemon npm-run-all sirv-cli stylelint stylelint-config-twbs-bootstrap
   

---

步骤 2：创建项目结构

mkdir {css,scss}
touch index.html scss/styles.scss postcss.config.js stylelint.config.mjs

目标布局：

my-project/
├── css/
├── scss/
│   └── styles.scss
├── stylelint.config.mjs
├── index.html
├── package-lock.json
├── package.json
└── postcss.config.js

---

步骤 3：配置 npm 脚本和配置文件

1. postcss.config.js — 在 Sass 之后运行 Autoprefixer：

   const autoprefixer = require('autoprefixer')
   
   module.exports = {
     plugins: [
       autoprefixer
     ]
   }
   

2. index.html — 链接已编译的 CSS 并加载 Bootstrap 预构建的 JS bundle（这里没有打包器，因此使用 dist）：

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

3. package.json — 添加脚本。注意添加 --load-path=node_modules，以便 Sass 解析 bootstrap：

   {
     "scripts": {
       "css-compile": "sass --load-path=node_modules --style expanded --source-map --embed-sources scss:css",
       "css-prefix": "postcss --config postcss.config.js --replace \"css/*.css\" \"!css/*.min.css\"",
       "build": "npm-run-all --sequential css-compile css-prefix",
       "watch": "nodemon --watch scss/ --ext scss --exec \"npm run build\"",
       "serve": "sirv --port 8080 --dev .",
       "start": "npm-run-all build --parallel watch serve",
       "lint": "stylelint \"scss/**/*.scss\""
     }
   }
   

4. stylelint.config.mjs：

   /** @type {import('stylelint').Config} */
   export default {
     extends: 'stylelint-config-twbs-bootstrap'
   }
   

5. 启动开发服务器：

   npm start
   

---

步骤 4：导入 Bootstrap 的 Sass

在 scss/styles.scss 中使用现代的 @use 规则（绝不使用 @import）：

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

使用 with () 自定义标记——只包含你想要更改的键：

@use "bootstrap/scss/bootstrap" with (
  $root-tokens: (
    --border-radius: .25rem,
    --spacer: 1.5rem,
  )
);

通过标记映射（$root-tokens 和每个组件的 $*-tokens 映射）覆盖 CSS 自定义属性，请参阅自定义 › Sass。在 Sass 中，标记名称不带前缀（例如 --border-radius、--spacer）；Bootstrap 的 dist/CDN CSS 会运行 PostCSS 来添加 --bs- 前缀，因此自行编译源代码时，这些名称会保持不带前缀。

---

步骤 5：验证

1. 运行 npm start 并打开 http://localhost:8080 — CSS 编译完成后，.container 和 .btn-solid.theme-primary 按钮应显示样式。
2. 确认已生成 css/styles.css，并且编辑 scss/styles.scss 时该文件会更新（监视进程正在运行）。
3. 确认 JS bundle 没有控制台错误。
4. 运行 npm run lint，使用 Bootstrap 的 stylelint 配置检查 Sass。
5. Bootstrap 6 需要支持 oklch() 和 color-mix() 的浏览器。

如需仅导入所用 Bootstrap 部分内容的优化构建，请参阅 twbs/examples sass-js 项目。