CODEWITHSUNDEEP
csswebsassjekyll
Kyu96
Kyu96

Reputation: 1359

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?

Upvotes: 0

Views: 577

Answers (1)

Jens Krause
Jens Krause

Reputation: 94

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.

Upvotes: 2

Related Questions