Syntax error when converting scss file

Hi Jekyll Community,

I’m using the minima theme for my website.
I edited the main.scss file to style an image in my website. However, i’ve encountered an error below. I’ve tried rerunning the website with the default main.scss file but the error still persists.

You can access the screenshots of the error,scss and layout file in this link

Can anyone help me with this?

Thank you in advance.

please post the error here as text (including as much output around it as possible), it makes searching for things in it easier and then we don’t have to click on an unknown link.

Context
-My website failed to load on my computer as i’ve encountered the error in the command line
-I’ve linked the scss file to the layout html file using href=’_sass/main.scss’
-I’ve tried to load the default main.scc file but the error still persits.

Error in command line
Conversion error: Jekyll::Converters::Scss encountered an error while converting ‘assets/main.scc’:
File to import not found or unreadable: minima. load paths:
C:\Ruby31-x64\lib\ruby\gems\3.1.0\gems\minima-2.5.1_sass

jekyll 3.9.0 | Error: File to import not found or unreadable: minima
Load paths:
C:\Ruby31-x64\lib\ruby\gems\3.1.0\gems\minima-2.5.1_sass
C:\Ruby31-x64\lib\ruby\gems\3.1.0\gems\minima-2.5.1_sass on line 1

is that really the name of the file? if so that is not correct. I think it should be .scss

If I understand what you mean this is not right either, when jekyll processes the sass/scss it will output it as .css as that is what is required for the browser. .sass or .scss are only allowed in the source and won’t work if referenced directly in the html.

also, the _sass location will not work as that won’t exist in the _site folder. You probably should be loading the main.css file - which is the source would be main.scss but jekyll would change it to main.css when it builds.

Thanks for your reply.
I’ve tried linking to /assets/main.css in my html layout file but the error persists.

did you rename the file in the source? assets/main.scc is not correct.

Its helpful to post the error log each time. You can also post a link to your repo if it is public.

I’ve changed the file name to main.scss in the minima assets folder

Here is the link to my Github repository.

Error code in command line below

Conversion error: Jekyll::Converters::Scss
encountered an error while converting ‘assets/main.scss’:
File to import not found or unreadable: minima.
Load paths: C:/Ruby31-x64/lib/ruby/gems/3.1.0/gems/minima-2.5.1/_sass C:/Ruby31-x64/lib/ruby/gems/3.1.0/gems/minima-2.5.1/_sass on line 1
jekyll 3.9.0 | Error: File to import not found or unreadable: minima.
Load paths:
C:/Ruby31-x64/lib/ruby/gems/3.1.0/gems/minima-2.5.1/_sass
C:/Ruby31-x64/lib/ruby/gems/3.1.0/gems/minima-2.5.1/_sass on line 1
C:/Ruby31-x64/lib/ruby/gems/3.1.0/gems/jekyll-sass-converter-1.5.2/lib/jekyll/converters/scss.rb:123:in `rescue in convert’:
File to import not found or unreadable: minima. (Jekyll::Converters::Scss::SyntaxError)

there is no assets folder in your repo - is it the same code as you are running locally?

when posting the error post everything - including the command you used.

The code is the same when i run it locally.

Hope my explanation makes it easier to understand.

Let me know if you need more information.

What i’m trying to do

  • Add css code to the main.scss file in order to resize and center the image in the layout file (home_exp.html)
  • Link the main.scss file to my layout file (home_exp.html)
  • Index markdown file will use the layout file (home_exp.html)

File extension of the main scss file below

C:\Ruby31-x64\lib\ruby\gems\3.1.0\gems\minima-2.5.1\assets\main.scss

File extension of the layout file below

C:\Ruby31-x64\lib\ruby\gems\3.1.0\gems\minima-2.5.1_layouts\home_exp.html

File extension of the index.markdown below

C:\Users\BURROW\Desktop\dy stuff\website\test_website\test-website\index.markdown

Command used to load the website

bundle exec jekyll serve

Error code in command line

Conversion error: Jekyll::Converters::Scss
encountered an error while converting ‘assets/main.scss’:
File to import not found or unreadable: minima.
Load paths: C:/Ruby31-x64/lib/ruby/gems/3.1.0/gems/minima-2.5.1/_sass
C:/Ruby31-x64/lib/ruby/gems/3.1.0/gems/minima-2.5.1/_sass on line 1
jekyll 3.9.0 | Error:
File to import not found or unreadable: minima.
Load paths:
C:/Ruby31-x64/lib/ruby/gems/3.1.0/gems/minima-2.5.1/_sass
C:/Ruby31-x64/lib/ruby/gems/3.1.0/gems/minima-2.5.1/_sass on line 1
C:/Ruby31-x64/lib/ruby/gems/3.1.0/gems/jekyll-sass-converter-1.5.2/lib/jekyll/converters/scss.rb:123:in `rescue in convert’:
File to import not found or unreadable: minima. (Jekyll::Converters::Scss::SyntaxError)

Are you editing the files inside the ruby folder? I don’t think you should though not sure it would error - certainly won’t work on GH I don’t think.

I don’t use gem based themes but it is my understand that if you want to edit the theme files inside the gem you should copy them to the corresponding location within your project.

it looks like the main.scss file is trying to import something that doesn’t exist:

File to import not found or unreadable: minima.

what are the contents of the main.scss file?

I’m editing the files inside the ruby folder indeed.

If that the case, should i just use a custom theme then?

Is creating a custom theme like the minima difficult?

The contents of the main.scss file as below

“—”

“—”

@import “minima”;

.my_photo{
float: right;
max-width: 33%;
margin: 0 0 1em 2em;
border-radius: 999px;
}

I never liked the gem themes as everything is hidden in the gem. But it isn’t really any different than just copying all the stuff in the gem into your repo, though since I don’t use gem based themes I may be missing something.

So if you remove the .my photo stuff you added, everything works? this could be a sass thing where you can’t have css in the main scss file where you do the imports? or maybe you have to have it above the imports? I’m not so sass savvy so not sure about that but I think its possible.

I like the theme’s where they aren’t really a theme, it is just sass/css in the main project. And all of the includes and layouts and what not are in the main project. That is the way it used to be before the gem based themes. You may try looking at the minima repo and see if they show a way to use it without it being a gem based theme.

Hi, I use Jekyll themes. Don’t ever edit the content in the ruby folder. If you want to override scss (or anything in the master theme) you should copy it into your repo and make change to the content there.

There is a helpful section in the Jekyll docs about overriding theme defaults.

I cloned your site to see what is going on, and there are several issues before you can debug getting the site up and running. Since you have not done anything significant on this site yet, I recommend creating a brand new site and following the override instructions link @Rusticola shared in a previous post.

That said, here are some glaring items that will keep your site from running:

  1. Your home_exp.html file contains this code:
<link rel="stylesheet" href=/assets/main.css"">

However, that is not proper HTML. It should look like this (note the quotes placed in the correct location):

<link rel="stylesheet" href="/assets/main.css">

So that fixes the HTML error, but really, you need to follow Jekyll’s best practices and use a link that looks like this:

<link rel="stylesheet" href="{{ "/assets/main.css" | relative_url }}">
  1. You created two files that I believe you intend to be custom layouts. One file is home_exp.html, and the other (which does not exist, but you link to it anyway) is blog_exp.html. First, any layouts must be in the _layouts folder. You either have to create that folder and put your layouts in there or copy over the minima theme, which will create the folder for you. Second, you need both files (not just one) to run your code successfully. That means you need to create blog_exp.html before continuing.

Poking around, I think you might still run into issues, but you must address these things before getting up and running.

FYI: Do not worry too much about overriding the theme. Minima rarely changes, and it is solid code that is just HTML and SCSS. I override my theme on new sites and have been running them for years without issue.

Thanks for the replies guys. It’s been a great help.