Search code examples
csswebsassjekyll

Jeykll file to import not found or unreadable: base

Ok, so, I somehow managed to break my jekyll website and I don't understand why. When I try to serve the site with jekyll I am prompted the following error:

/usr/lib/ruby/gems/2.7.0/gems/jekyll-sass-converter-2.1.0/lib/jekyll/converters/scss.rb:190:in `rescue in convert': Error: File to import not found or unreadable: base. (Jekyll::Converters::Scss::SyntaxError)
        on line 24:1 of main.scss
>> @import

   ^

My directory structure looks like so:

.
├── README.md
├── _site
│   ├── README.md
│   └── src
│       ├── assets
│       │   ├── posts
│       │   │   └── 202-07-23-about
│       │   │       └── avatar.png
│       │   └── screenshot.png
│       ├── general
│       │   └── 2020
│       │       └── 07
│       │           └── 23
│       │               └── about.html
│       └── index.html
└── src
    ├── assets
    │   ├── images
    │   ├── posts
    │   │   └── 202-07-23-about
    │   │       └── avatar.png
    │   └── screenshot.png
    ├── _config.yml
    ├── css
    │   └── main.scss
    ├── _includes
    │   ├── footer.html
    │   └── head.html
    ├── index.html
    ├── _layouts
    │   ├── default.html
    │   ├── page.html
    │   └── post.html
    ├── _posts
    │   └── 2020-07-23-about.md
    ├── _sass
    │   ├── _base.scss
    │   └── _syntax-highlighting.scss
    └── _templates
        ├── draft
        ├── page
        └── post

I assume it has trouble finding the _base.scss file? How can I tell it where it needs to look? It is pointing out the error is in line 24, but that doesn't really makes much sense. My main.scss looks like so:

---
# Only the main Sass file needs front matter (the dashes are enough)
---
@charset "utf-8";

// Our variables
$base-font-family: 'PT Serif', Georgia, Times, 'Times New Roman', serif;
$base-font-size:   12pt;
$small-font-size:  $base-font-size * 0.875;
$base-line-height: 1.5;

$mono-font-family: 'Source Code Pro', Menlo, Monaco, Inconsolata;

$text-color:       hsl(0, 0%, 25%);

$alt-color:        hsl(0, 70%, 46%);
$alt-color-darker: darken($alt-color, 6%);

$article-bg-color: hsl(35, 36%, 95%);
$background-color: darken($article-bg-color, 6%);
$bg-color-darker:  darken($article-bg-color, 15%);
$alt-text-color:   darken($article-bg-color, 60%);

$subdued-border:   rgba($bg-color-darker, 0.5);

// Import partials from `sass_dir` (defaults to `_sass`)
@import
  "base",
  "syntax-highlighting"
;

Can someone point out how I can fix this problem?

Solution

  • Your project directory structure looks a little odd, since you use the unconventional organisation within the src folder.

    I see 2 simple solutions:

    1. Move the contents out of the src folder into the root

    That is the expected structure and you don't run into further configuration issues. It will just work because everything is where it is supposed to be.

    2. Configure sass in _config.yml

    In your _config.yml add the following sections:

    sass:
  sass_dir: src/_sass

    and the jekyll-sass-converter should be able to find it. Have a look at the Jekyll Assets Docs for further information.