SCSS @import in Jekyll 2.1

Question

I've this project structure

-Project
    -css
        -main.scss
        -_sass/
            -base
            -layout
            -pages
            -vendor

Content of my main.scss file.

---
---

@import "sass/base/reset";
@import "sass/base/colours";
@import "sass/base/vars-typeplate";
@import "sass/base/typeplate";

I've read in Jekyll documentation that in order to work with SCSS statements I've to include sass: sass_dir: _sass. I suppose I've to add this line over in the _config.yml. But I did it in my and it's still not working. Everytime I try to run jekyll serve. My console shows this message:

jekyll 2.1.0 | Error:  File to import not found or unreadable

Answer 1

Jekyll doc says : If you are using Sass @import statements, you’ll need to ensure that your sass_dir is set to the base directory that contains your Sass files.

Then for you it's css/_sass.

In your _config.yml, you have :

sass:
    sass_dir: css/_sass

And in css/mains.cscc

---
---

@import "reset";

And that's it.

Answer 2

For users landing here who are on Jekyll 3.x here's a simple pattern to follow:

Add files to your _sass directory, like:

.
├── elements.scss
├── forms.scss
├── layout.scss
├── mixins
│   ├── columns.scss
│   └── flexbox.scss
├── navigation.scss
└── variables.scss

There's no need to prefix any of these files with an empty front matter block, and no need to update your Jekyll config.

Then, create a css folder under your site root and create a screen.scss file like this:

---
---
@import "mixins/flexbox";
@import "mixins/columns";
@import "variables";
@import "elements";
@import "layout";
@import "forms";

Notice this file does use the ---\n-- so it gets picked up by Jekyll and processed properly.

The result will be a file output containing all of your transpiled CSS which you can use in a link tag in your document head:

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

Consult the Jekyll docs for the latest.