如何在Jekyll/GitHub Pages中引入Bootstrap SASS？

我完全懂你的困扰——GitHub Pages的环境限制确实让人头疼，尤其是想用上Bootstrap Sass却不能依赖npm或者Bower这类工具。你之前遇到的@import "bootstrap"报错，本质是Jekyll找不到Bootstrap的Sass文件；而bundle add bootstrap没用，是因为GitHub Pages只支持特定的Ruby Gem，官方的bootstrap gem不在这个列表里。

下面给你两个靠谱的方案，都能在GitHub Pages上正常运行：

这个方法完全避开GitHub Pages的gem限制，把Bootstrap的Sass源码直接放到你的项目里，可控性最强：

• 先去Bootstrap官网下载Sass版本的源码包（或者直接从Bootstrap的GitHub仓库拉取scss目录下的所有文件）
• 在你的Jekyll项目根目录创建_sass/bootstrap文件夹，把下载的Bootstrap Sass文件（包括_variables.scss、bootstrap.scss等所有文件和子文件夹）全部复制进去
• 打开你的/assets/css/site.scss，确保文件开头有Jekyll的Front Matter（就是两行---），然后按顺序导入Bootstrap：

---
---
// 先导入Bootstrap的变量文件，方便你在这里覆盖默认样式
@import "bootstrap/variables";
// 比如你想修改主题色：$primary: #2c3e50;

// 再导入Bootstrap的核心样式
@import "bootstrap/bootstrap";

// 这里可以写你自己的自定义样式

这样Jekyll编译的时候就能找到Bootstrap的Sass文件，GitHub Pages也能正常处理。

如果你更倾向用Ruby Gem来管理Bootstrap版本，需要用GitHub Pages支持的bootstrap-sass gem（注意这是适配Bootstrap 4及以下的版本，Bootstrap 5暂时没有官方支持的兼容gem）：

1. 项目根目录创建Gemfile（如果没有的话），内容如下：

source "https://rubygems.org"
gem "github-pages", group: :jekyll_plugins
gem "bootstrap-sass"

2. 运行bundle install安装本地依赖，之后用bundle exec jekyll serve启动本地服务，确保能正常编译
3. 打开/assets/css/site.scss，添加导入语句：

---
---
@import "bootstrap";

GitHub Pages会识别bootstrap-sass gem并加载对应的Sass文件，这样就能正常编译了。

• 不管用哪个方案，site.scss必须包含开头的--- Front Matter，否则Jekyll不会把它当成需要编译的Sass文件处理
• 本地测试一定要用bundle exec jekyll serve，这样能模拟GitHub Pages的环境，避免本地和线上的依赖差异
• 如果用方案2，注意bootstrap-sass只支持Bootstrap 4及以下版本，如果你想用Bootstrap 5，建议用方案1

内容的提问来源于stack exchange，提问作者Matt Thomas