7

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
cimmanon
  • 67,211
  • 17
  • 165
  • 171
Hugo Magallanes
  • 87
  • 1
  • 4
  • Maybe you should try and look into this first: http://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 Jul 05 '14 at 15:01
  • 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 Jul 05 '14 at 15:17
  • maybe you could try: @import "reset"; instead of the entire path? – Danny van Holten Jul 05 '14 at 15:19
  • It gave me the same error. – Hugo Magallanes Jul 05 '14 at 15:21
  • 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 Jul 05 '14 at 15:22

4 Answers4

12

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.

David Jacquel
  • 51,670
  • 6
  • 121
  • 147
4

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.

vhs
  • 9,316
  • 3
  • 66
  • 70
0

Into config.yml

sass_dir: css/_sass

You must specify the full url.

rpasianotto
  • 1,383
  • 1
  • 9
  • 22
0

put the _sass at the root of the project.

DocJ457
  • 797
  • 7
  • 17