'SCSS @import in Jekyll 2.1

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

sass jekyll

Solution 1:^[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.

Solution 2:^[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.

Solution 3:^[3]

Into config.yml

sass_dir: css/_sass

You must specify the full url.

Solution 4:^[4]

put the _sass at the root of the project.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	David Jacquel
Solution 2
Solution 3	rpasianotto
Solution 4	David Odhiambo

'SCSS @import in Jekyll 2.1

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]

Solution 4:^[4]