SCSS import fails (Jekyll)

Question

I'm trying to setup Jekyll on GitHub pages. Locally I have no build/execution warnings/errors, even when I use bundle exec jekyll serve --safe. But the import command fails on GitHub pages. The error I'm getting back is:

Your SCSS file css/main.scss has an error on line 49: File to import not found or unreadable: base

I have not changed the contents of main.scss:

// Import partials from `sass_dir` (defaults to `_sass`)
@import
    "base",
    "layout",
    "syntax-highlighting"
;

Defining the sass_dir variable explicitly in _config.yml doesn't help. Is there a way to debug scss files locally? I have tried using the sass command but it doesn't seem to work with scss files.

I know that the problem is with the @import part because if I comment it and push the build on GitHub pages no longer fails -- but my blog is ugly :)

Note: I have already tried what's described in SCSS @import in Jekyll 2.1 but it didn't get me somewhere.

Answer 1

Ok, get it ! It was simple.

• Github pages is running from your repository root : faif.github.io
• as your _config.yml file is in /blog, it doesn't see it an takes default settings for everything. eg : path for scss import, is faif.github.io/_sass and result in an error, because your files are in faif.github.io/blog/_sass.

First option

Move _config.yml at the root and tweak sass, includes, ... variables. I don't think it's the best option, but it can certainly be done as nearly everything if configurable in jekyll 3.1.x (documentation).

Second option

• Create a blog repository
• Clone it
• git checkout -b gh-pages because project repositories are published from gh-pages branch only
• Copy your blog folder content in this repository
• Remove your blog folder from faif.github.io repository
• Change baseurl to /blog in _config.yml
• Commit and push

And your done.