bootstrap-npm

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Bootstrap 6 with npm

基于 npm 的 Bootstrap 6 项目搭建

Set up a Bootstrap 6 project that compiles Sass to CSS using npm command-line tools, with no JavaScript bundler. Bootstrap's pre-built JS bundle is loaded directly via a

<script>

tag. Requires Node.js and terminal familiarity.

本教程将使用 npm 命令行工具搭建一个将 Sass 编译为 CSS 的 Bootstrap 6 项目，无需 JavaScript 打包工具。Bootstrap 预构建的 JS 包通过

<script>

标签直接加载。需要具备 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 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 the tools to compile and post-process CSS:

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

Install local dev tooling (watch, run scripts, serve, lint):

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

创建项目并初始化 npm：

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

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

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

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

安装本地开发工具（文件监听、脚本运行、静态服务、代码检查）：
sh
```
npm i --save-dev nodemon npm-run-all sirv-cli stylelint stylelint-config-twbs-bootstrap
```

Step 2: Create the project structure

步骤 2：创建项目结构

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

Target layout:

text

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

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

目标目录结构：

text

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

Step 3: Configure npm scripts and config files

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

postcss.config.js

— run Autoprefixer after Sass:

const autoprefixer = require('autoprefixer')

module.exports = {
  plugins: [
    autoprefixer
  ]
}

index.html

— link the compiled CSS and load Bootstrap's pre-built JS bundle (no bundler here, so use

dist

html

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

package.json

— add scripts. Note

--load-path=node_modules

so Sass resolves

bootstrap

json

{
  "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\""
  }
}

stylelint.config.mjs

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

Start the dev server:
sh
```
npm start
```

postcss.config.js

— 在 Sass 编译后运行 Autoprefixer：

const autoprefixer = require('autoprefixer')

module.exports = {
  plugins: [
    autoprefixer
  ]
}

index.html

— 引入编译后的 CSS，并加载 Bootstrap 预构建的 JS 包（此处无打包工具，因此使用

dist

目录下的文件）：

html

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

package.json

— 添加脚本。注意此处的

--load-path=node_modules

参数用于让 Sass 能够解析

bootstrap

包：

json

{
  "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\""
  }
}

stylelint.config.mjs

：

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

启动开发服务器：
sh
```
npm start
```

Step 4: Import Bootstrap's Sass

步骤 4：引入 Bootstrap 的 Sass

Add to

scss/styles.scss

using the modern

@use

rule (never

@import

scss

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

Customize tokens with

with ()

— include only the keys you want to change:

scss

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

Override CSS custom properties through the token maps (

$root-tokens

and each component's

$*-tokens

map), following Customize › Sass. Token names are written unprefixed in Sass (e.g.

--border-radius

--spacer

); Bootstrap's dist/CDN CSS runs PostCSS to add the

--bs-

prefix, so compiling the source yourself keeps them unprefixed.

使用现代的

@use

规则将以下内容添加到

scss/styles.scss

中（请勿使用

@import

）：

scss

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

使用

with ()

自定义 token —— 仅包含你需要修改的键即可：

scss

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

你可以通过 token 映射（

$root-tokens

以及各组件的

$*-tokens

映射）覆盖 CSS 自定义属性，具体可参考自定义 › Sass。在 Sass 中，token 名称不带前缀（例如

--border-radius

、

--spacer

）；Bootstrap 的 dist/CDN 版本 CSS 会通过 PostCSS 添加

--bs-

前缀，因此自行编译源码时 token 不会带此前缀。

Step 5: Verify

步骤 5：验证

Run
```
npm start
```
and open
```
http://localhost:8080
```
— the
```
.container
```
and
```
.btn-solid.theme-primary
```
button should be styled once the CSS compiles.
Confirm
```
css/styles.css
```
is generated and updates when you edit
```
scss/styles.scss
```
(watch is running).
Confirm no console errors from the JS bundle.
Run
```
npm run lint
```
to check Sass against Bootstrap's stylelint config.
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 sass-js project.

运行
```
npm start
```
并打开
```
http://localhost:8080
```
—— CSS 编译完成后，
```
.container
```
容器和
```
.btn-solid.theme-primary
```
按钮应该会显示对应样式。
确认
```
css/styles.css
```
已生成，且当你编辑
```
scss/styles.scss
```
时文件会自动更新（监听功能已运行）。
确认 JS 包没有在控制台抛出错误。
运行
```
npm run lint
```
，使用 Bootstrap 的 stylelint 配置检查 Sass 代码。
Bootstrap 6 需要浏览器支持
```
oklch()
```
和
```
color-mix()
```
特性。

如需实现仅引入你用到的 Bootstrap 功能的优化构建，请参考 twbs/examples 中的 sass-js 项目。