Github Pages sees required YAML frontmatter in .scss as syntax error

[egardner]

Hi there-

I'm trying to set up a personal Jekyll site with GH pages at egardner.github.io. Source code here.

When building the site, I keep getting error messages from Github complaining of syntax errors in my main.scss file:

The file `assets/styles/main.scss` contains syntax errors. 
For more information, see https://help.github.com/articles/page-build-failed-markdown-errors.

As far as I can tell, the error is caused by the two lines of YAML front-matter (---) at the beginning of the file. When I remove those lines and commit the site builds successfully, but all my styles break because the stylesheet SCSS is no longer being converted or processed by Jekyll.

Running bundle exec jekyll serve (the jekyll serve command won't work by itself for me, for some reason) works fine locally, all the styles and assets show up. Only my main.scss file contains the frontmatter, all other sass files live in the Sass directory that I've specified in config.yml.

It seems strange that GH Pages sees a syntax error where I'm following Jekyll's guidelines exactly, as far as I can tell. Sass is supposed to be supported by the latest version of gh-pages.

I imagine many people here are using GH pages for deployment – am I doing something wrong?

Thanks, Eric

For reference, here's my main.scss file:

---

---
/* Bourbon, Bitters, & Neat
 * ---------------------------------------------------------------------------*/
@import "lib/normalize";
@import "lib/bourbon/bourbon";
@import "base/grid-settings";
@import "lib/neat/neat";

/* Fonts
 * ---------------------------------------------------------------------------*/
// Merriweather
@include font-face("Merriweather", '/assets/fonts/merriweather-light', normal);
@include font-face("Merriweather", '/assets/fonts/merriweather-lightitalic', normal, italic);
@include font-face("Merriweather", '/assets/fonts/merriweather-bold', bold);
@include font-face("Merriweather", '/assets/fonts/merriweather-bolditalic', bold, italic);
// Lato
@include font-face("Lato", '/assets/fonts/lato-light', normal);
@include font-face("Lato", '/assets/fonts/lato-lightitalic', normal, italic);
@include font-face("Lato", '/assets/fonts/lato-black', bold);
@include font-face("Lato", '/assets/fonts/lato-blackitalic', bold, italic);
// League Spartan
@include font-face("League Spartan", '/assets/fonts/leaguespartan-bold', bold);

/* Globals
 * ---------------------------------------------------------------------------*/
@import "base/base";

/* Layouts
 * ---------------------------------------------------------------------------*/

[egardner]

Okay, actually this was not the issue at all! Turns out I had added most of my vendor Sass libraries to my .gitignore on the assumption they would be installed locally. But of course GH pages doesn't work this way, all the dependencies need to be included. Somewhat misleading error message but otherwise everything works properly.

[troyswanson]

:boom: Glad you got it sorted.