How to @import sass in Jekyll

Jekyll is a small community and finding the right docs and tutorials is kind of hard.
Yes you can find stuff in Jekyll official docs but you will eventually face some error which you can't find in the official docs.

I spend the whole day on trying to import my sass files in Jekyll, so in this article I will tell you how to do it and save you lots of time.

The good news is Jekyll comes with a built-in sass plugin and you don't have go through the whole installing sass process thing

Let's get started

1.

The first thing you need to do is go to your "_config.yml" file and add this :

sass:
    sass_dir: _sass
    style: compressed

2.

Now create a new folder and name it "_sass".

pssst don't forget the underscore

Inside your "_sass" folder you can create folders and sass files.

Let's create 2 folders, one is named "base" and the other is "layout"

> _sass
   > base
   > layout

Inside each folder, create a sass file.
I called one "test.scss" and one "home.scss"

> _sass
   > base
       > test.scss
   > layout
       > home.scss

The files in your "_sass" folder are the the files that you write your styles in

3.

create a main sass file in _sass foldeer

> _sass
   > base
   > layout
   > styles.scss

and import all of your files (which are inside "_sass" folder ) inside "styles.scss.

Now let's import our index.scss and home.scss inside styles.scss

@import "base/index.scss";
@import "layout/home.scss";

Note : you may see some people import their files without .scss and it'd work just fine for them but for my case didn't work because Jekyll generates new css files inside of _sass folder which then would interfere with scss file and you'd get a got an error

<!-- Jekyll generates new css files -->
> _sass
    > styles.scss
    > styles.css
    > styles.css.map

So you see now we have three files that has the same exact name
and when you import your files like :

@import "styles";

Jekyll wouldn't know which style file to import and you'll get an error telling you to delete or rename your file. So it's best to write the file extension.

4.

after importing our files into the main scss file , now it's time to compile it into css
and all we have to do is import the main scss file into it

A. Create "assets" folder , then create a new css folder inside it. now we need to create our main css file
but here's the trick, your main css file shouldn't be "style.css" it won't work , instead it should be "style.scss"

>assets
   >css
      >style.scss

B. Now it's time to import your main scss file into your main css file (which we create in css folder) like this :

---
---

@import "styles.scss";

Note :You only need to add front matter in your main css file and Jekyll will automatically figure our to compile it into css

5.

The last step is linking our css file in index.html

Remember when I said our main css file can't be "styles.css" and need to be in "styles.scss"?
So here's another tricky part, when you want to link it in your index.html you shouldn't link it like this :

    <link rel="stylesheet" href="{{ site.baseurl }}/assets/css/style.scss">

We simply need to turn it into css :

    <link rel="stylesheet" href="{{ site.baseurl }}/assets/css/style.css">

Tada! you're all set and done.

Tip : I used to create all these bunch of folders/files that were empty and imported them and kept getting errors , it turned out you shouldn't import empty files