View on GitHub

构建工具

了解如何使用Bootstrap随附的npm脚本来构建我们的文档,编译源代码,运行测试等。

安装工具

Bootstrap 将 npm 脚本用于其构建系统。我们的 package.json 提供了便捷的途径来编译代码、运行测试等。

要使用我们的构建系统并在本地运行我们的文档,您需要一份 Bootstrap的源文件和节点的副本。遵循以下步骤,你就可以开始搭建本地运行环境:

  1. 下载并安装 Node.js,我们使用它来管理依赖关系。
  2. 下载 Bootstrap的源码或克隆 Bootstrap的源码仓库到本地。
  3. 导航到 根目录 /bootstrap 并运行 npm install 以安装 package.json 文件中列出的所有依赖项到本地。

完成后,您将就可以运行从命令行提供的各种命令。

使用 npm 脚本

我们的 package.json 包括以下命令和任务:

任务 描述
npm run dist npm run dist 用编译文件创建 /dist/ 目录。 使用 SassAutoprefixerterser
npm test 在运行 npm run dist命令之后在本地运行测试
npm run docs-serve 在本地生成和运行文档。

运行 npm run 命令查看所有npm脚本。

利用 npm 和我们提供的模板项目快速上手 Bootstrap! 前往 twbs/bootstrap-npm-starter 模板库,了解如何在自己的npm项目中构建和定制 Bootstrap。包括Sass编译器、Autoprefixer、Stylelint、PurgeCSS和 Bootstrap 图标。

Sass

Bootstrap v4 使用 Node Sass将Sass源文件编译成CSS文件(包含在构建过程中)。为了在使用您自己的资产管道编译Sass时得到相同的生成CSS,您需要使用至少支持Node Sass的特性的Sass编译器。这一点值得注意,因为到2020年10月26日为止, LibSass 和在其上构建的包(包括Node sas) 已被弃用

如果您需要更新的Sass功能或与更新的CSS标准兼容, Dart Sass 现在是Sass的主要实现,并支持与节点Sass完全兼容的JavaScript API(Dart Sass的 GitHub页面上列出了一些例外)。

我们将Sass舍入精度增加到6(默认情况下, Node Sass中为5),以防止浏览器舍入问题。如果您使用Dart Sass,则不需要对其进行调整,因为编译器使用10的舍入精度,并且出于效率原因,不允许对其进行调整。

Autoprefixer

Bootstrap 使用 Autoprefixer 包含在我们的构建过程中)在构建时自动向一些CSS属性添加供应商前缀。这样做节省了我们的时间和代码,因为我们可以一次性编写CSS的关键部分,同时不需要像v3中那样的供应商混合。

我们在GitHub存储库中的一个单独的文件中维护通过Autoprefixer支持的浏览器列表。有关详细信息,请参见 .browserslistrc

本地文档

在本地运行我们的文档需要使用 Hugo,它是通过 hugo-bin npm package 安装的。Hugo是一个非常快速和可扩展的静态站点生成器,它为我们提供了:基本包含、基于降价的文件、模板等等。以下是如何开始:

  1. 运行上述 安装工具 以安装所有依赖项。
  2. 从根 /bootstrap 目录,在命令行中运行npm run docs-serve
  3. 在浏览器中打开 http://localhost:9001/ 来查看。

通过阅读 Hugo的文档,了解更多关于使用Hugo的信息。

故障排除

如果在安装依赖项时遇到问题,请卸载所有以前的依赖项版本(全局和本地)。然后,重新运行npm install