SCSS @import in Jekyll 2.1

7
votes

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
4
sassjekyll
Maybe you should try and look into this first: compass-style.org I don't know anything about Jekyll but you need to install sass first (and when you install the compass plugin it automatically installs sass as well + compass is just great) - Danny van Holten
I've Sass installed in my machine. Jekyll runs my Sass files fine, although for me to use @import statements, I need to set up some kind of special configuration. - Hugo Magallanes
maybe you could try: @import "reset"; instead of the entire path? - Danny van Holten
It gave me the same error. - Hugo Magallanes
Last option I know off (because I know sass, but not Jekyll. Is not to use the layered scss files. Just putt them all in the css folder. Otherwise I can't help you - Danny van Holten

4 Answers

12
votes

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.

3
votes

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">

Note this will cause some blocking in browsers as they have to pause to fetch the CSS assets on page render. There are alternative approaches which are better for PageSpeed, though they are more advanced.

Always consult the Jekyll docs for the latest.

0
votes

Into config.yml

sass_dir: css/_sass

You must specify the full url.

0
votes

put the _sass at the root of the project.