Jekyll+Bootstrap站点部署GitHub Pages时SCSS导入文件报错如何解决

问题根因 #

你遇到的SCSS导入报错核心是导入路径不匹配，加上GitHub Pages默认的SASS加载路径不包含你存放自定义样式文件的目录：

1. 你的main.scss本身存放在assets目录下，导入语句里多写了一层assets/前缀，导致实际查找路径变成了assets/assets/css/minima/base，和你实际的文件路径不匹配
2. GitHub Pages默认的SASS加载路径只包含自带主题的_sass目录，不会自动遍历你项目下的assets/css目录查找样式文件

解决方法 #

方案1：修正导入路径（推荐） #

直接修改assets/main.scss中的导入语句，使用相对于main.scss本身的路径即可：

@import
  "./css/minima/base",
  "./css/bootstrap/bootstrap",
  "./css/minima/layout",
  "./css/minima/syntax-highlighting"
;

方案2：配置SASS加载路径 #

如果不想修改导入语句，在项目根目录的_config.yml中添加如下配置，指定SASS的查找根路径为项目根目录：

sass:
  load_paths:
    - .
  style: compressed

额外注意项 #

• 不要提交本地生成的_site目录到GitHub仓库，GitHub Pages会自动执行构建生成站点文件，本地_site提交后会干扰线上构建流程，建议将_site添加到.gitignore文件中忽略
• 检查Gemfile中的Jekyll版本和GitHub Pages官方支持的版本对齐，避免本地和线上环境差异导致的其他构建问题

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