Bulma CSS 框架采用全面的构建系统来将 Sass 文件编译为 CSS，创建各种框架变体，并准备分发资源。本文档解释了 Bulma 的源代码如何通过其构建系统进行构建、编译和分发。有关在您的项目中安装和使用 Bulma 的信息，请参阅 安装和使用。
Bulma 使用基于 Node.js 的构建流程将 Sass 源文件转换为可用的 CSS。构建系统负责通过 npm 和 CDN 进行编译、缩小、变体生成和分发准备。
来源：package.json38-52 package.json54-61
Bulma 依赖于多个开发依赖项来将 Sass 文件转换为生产就绪的 CSS
| 依赖项 | 目的 |
|---|---|
| sass | 将 Sass 文件编译为 CSS |
| postcss-cli | 对 CSS 文件应用后处理 |
| cssnano | 缩小 CSS 文件 |
| rimraf | 清理构建目录 |
| prettier | 根据样式规则格式化代码 |
构建过程受 package.json 中定义的多个 npm 脚本控制，这些脚本处理构建流程的不同方面。
| 脚本 | 描述 |
|---|---|
build-bulma | 将主要的 bulma.scss 文件编译为带有源映射的扩展 CSS |
minify-bulma | 使用 cssnano 缩小主 CSS 文件 |
build-versions | 构建所有框架变体 |
minify-versions | 缩小所有框架变体 CSS 文件 |
clean | 删除 CSS 目录 |
deploy | 完整的构建过程：清理、构建和缩小 |
start | 开发模式，监视更改 |
标准构建过程会生成两个主要的 CSS 文件
css/bulma.css - 带有源映射的、可读的扩展 CSScss/bulma.min.css - 用于生产环境的缩小版本这两个文件之间的尺寸差异很大，因此缩小版本更适合生产环境。
来源：package.json39-40 css/bulma.css1-5 css/bulma.min.css1-5
Bulma 还提供专门的框架变体以满足不同的项目需求
| 变体 | 描述 | 构建脚本 |
|---|---|---|
bulma-no-dark-mode | 排除暗模式支持 | version-no-dark-mode |
bulma-no-helpers | 排除辅助类 | version-no-helpers |
bulma-no-helpers-prefixed | 排除辅助类并使用前缀类名 | version-no-helpers-prefixed |
bulma-prefixed | 使用前缀类名 | version-prefixed |
每个变体都从 versions/ 目录中的相应 Sass 文件构建，并输出到 css/versions/ 目录。
来源：package.json41-44 package.json45
来源：package.json38-52 css/bulma.css.map1-5
在编译过程中，构建系统根据 Sass 函数处理 CSS 自定义属性（变量）
css-variables.scss 工具提供了用于生成 CSS 变量的函数来源：sass/utilities/css-variables.scss9-176 sass/utilities/functions.scss8-84
构建完成后，Bulma 会通过以下方式进行打包和分发
分发包包含
| 文件/目录 | 目的 |
|---|---|
| css/ | 已编译的 CSS 和缩小版文件 |
| sass/ | 源 Sass 文件 |
| versions/ | 框架变体 Sass 文件 |
| bulma.scss | 主入口点 |
| LICENSE | 许可证信息 |
| README.md | 文档 |
来源：package.json54-61 bower.json7-16
对于 Bulma 本身进行开发的开发者，构建系统提供了工作流脚本
npm start - 监视 bulma.scss 的更改并自动重新编译npm test - 在开发过程中监视测试文件的更改npm run deploy - 用于发布的完整构建过程来源：package.json51-52 package.json50
Bulma 文档站点有其自己独立的构建过程，这与框架的核心构建系统不同。文档是使用以下工具构建的