How to use scss in jekyll?

Question

I saw similar posts on SO here and on GH here, but neither solved the issue that I have.

I have a Jekyll app on my gh pages where I needed to use scss features (mostly for mixins). However, I could not get jekyll to work with scss.

Currently, this is where my (CSS) files are at. All of my CSS are taken from custom.css. I imported it in header <link rel="stylesheet" href="{{ site.baseurl }}/assets/stylesheets/custom.css">.

The .scss files inside _sass folder are empty.

This is what it looks like inside _config.yml:

...
#sass
sass:
  sass_dir:           _sass
  style:              compressed

That's where I am at now. Here are some things I have tried:

1. I have tried changing custom.css into custom.scss (and then updated the header <link href... stylesheets/custom.scss">. When I do that, I get Resource interpreted as Stylesheet but transferred with MIME type text/x-scss... error.

2. I tried changing the configuration inside _config.yml into: sass: sass_dir: assets/stylesheets style: compressed ... and kept the changes from 1. I restarted jekyll server. However I still get Resource interpreted as Stylesheet but transferred with MIME type text/x-scss... error.

3. Tried adding <link rel="stylesheet" href="{{ site.baseurl }}/_sass/main.scss">, but I get GET http://localhost:4000/_sass/main.scss error.

The problem, I noticed, is that the app seem to not recognize main.scss at all. I tried to create a simple red-colored div with main.scss, but nothing was displayed.

The question is, how can I use .scss with Jekyll?

Answer 1

Having _sass/main.scss, in assets/stylesheets/custom.css add the sass file (keep three dashes at the beginning):

---
---

@import "main";

Now you can work with all your sass variables/mixins etc in custom.css below the import keyword.

Make sure you add the generated css to your layout:

<link rel="stylesheet" href="{{'/assets/stylesheets/custom.css' | absolute_url}}">