Error in Step by Step Tutorial

Hi, I have been trying to do the step by step tutorial here Setup | Jekyll • Simple, blog-aware, static sites but ran into some compilation issue with SCSS:

jekyll/assets/css/main.scss 3:15 @import
jekyll/assets/css/styles.scss 2:4 root stylesheet
Conversion error: Jekyll::Converters::Scss encountered an error while converting ‘assets/css/styles.scss’:
expected “{”.
Error: expected “{”.
Error: Run jekyll build --trace for more information.

I made sure that I followed the steps verbatim but cannot get rid of the error and blocked. Please help.

1 Like

what is in this file? can you post the full file?

---
---
@import 
   "main";

Copied from the tutorial.

i formatted it for you - is main on the 2nd line like that?

It may be complaining about the file it is importing - what is in the main file?

when you paste code put three back tics ``` above and below so it formats properly

1 Like

I’m not at my computer at the moment, but I saw there is a new version of Jekyll released a few days ago. It refers to an issue with main.scss.

I have no idea if this is the issue, but for the sake of trying, rename the file base.scss to main.scss and then change your import to main as well.

@BillRaymond Any idea where to make this change? The tutorial code doesn’t have base.scss. Should try rolling back to a stable version and retry?

Sorry I meant rename main to base :slight_smile:

1 │ @import "base";
  │         ^^^^^^
  ╵
  - 1:9  root stylesheet 
  Conversion error: Jekyll::Converters::Scss encountered an error while converting 'assets/css/base.scss':
                    Can't find stylesheet to import.
             Error: Can't find stylesheet to import.
             Error: Run jekyll build --trace for more information.

If there’s an older version that works please point me to that.

Hello @thomastk,
I looked into the step-by-step tutorial and successfully completed all steps without any error. Also, I do not see any mentions of @import with the name of the partial file on the next line.
Even when I force my browser to render the viewport at 180pixels max-width, the import directive remains on a single line.

Regardless, I suggest you to delete the folder and start the tutorial again from scratch.

1 Like

For what it’s worth I found this thread because I started getting the same error for an already existing Jekyll site that’s been building successfully for months after running bundle update then bundle exec jekyll serve --future --host 0.0.0.0.

Conversion error: Jekyll::Converters::Scss encountered an error while converting 'assets/css/main.scss':
                    expected "{".
                    ------------------------------------------------
      Jekyll 4.3.2   Please append `--trace` to the `serve` command
                     for any additional information or backtrace.
                    ------------------------------------------------
/usr/local/lib/ruby/gems/3.2.0/gems/jekyll-sass-converter-3.0.0/lib/jekyll/converters/scss.rb:175:in `rescue in convert': expected "{". (Jekyll::Converters::Scss::SyntaxError)

        raise SyntaxError, e.message
              ^^^^^^^^^^^^^^^^^^^^^^

And contents of the assets/css/main.scss are:

---
---

@import "main";

The error goes away if I rename assets/css/main.scss to base.scss and change the import to @import "base"; but I don’t know how anyone else would be able to guess that.

I have the same issue on a previously working site, after updating from
Ruby 2.6.3, Jekyll 3.8.6, jekyll-sass-converter 2.0.0 (i think, or 1.5.2)
to
Ruby 3.2.1, Jekyll 4.3.2, jekyll-sass-converter 3.0.0

It’s not related to “main.scss”, I am getting the error on everything in assets/css that includes an
@import "whatever";

eg

  ╷
3 │ @import "gallery";
  │                  ^
  ╵
  /srv/jekyll/assets/css/gallery.scss 3:18  @import
  /srv/jekyll/assets/css/gallery.scss 1:9   root stylesheet
  Conversion error: Jekyll::Converters::Scss encountered an error while converting 'assets/css/gallery.scss':
                    expected "{".
                    ------------------------------------------------
      Jekyll 4.3.2   Please append `--trace` to the `serve` command
                     for any additional information or backtrace.
                    ------------------------------------------------
/usr/gem/gems/jekyll-sass-converter-3.0.0/lib/jekyll/converters/scss.rb:175:in `rescue in convert': expected "{". (Jekyll::Converters::Scss::SyntaxError)

        raise SyntaxError, e.message
              ^^^^^^^^^^^^^^^^^^^^^^
        from /usr/gem/gems/jekyll-sass-converter-3.0.0/lib/jekyll/converters/scss.rb:159:in `convert'
        from /usr/gem/gems/jekyll-4.3.2/lib/jekyll/renderer.rb:105:in `block in convert'

I did have a main.scss and tried converting that and it’s import to base on the off chance it was also affecting the other ones but to no avail.

I have a tenuous intuition it’s trying to use some different flavor of sass now

Edit: I just noticed this VS Code “error” I’ve been ignoring in these sass files since the beginning is related:
image

I ignored this in the past because I got the syntax from the Jekyll tutorial, and it worked before.

1 Like

Maybe I should make a new issue about this but I think it’s the same issue the OP had (and I’m guessing gave up on jekyll over). I don’t particularly need 4.3.2 but out of determination I’ve spent most of the weekend trying to get 4.3.2/3.0.0 to work, although 4.2.2/2.2.0 seems to work fine.

I poked around in all the different pull requests on envygeeks (“official” but abandoned?) alpine docker image, and reading peoples thoughts in issues and PRs on why his image doesn’t work. I’ve rebuilt a new image from scratch in ubuntu similar to Bill’s image. I’ve tried getting 4.3.2 to run with jekyll-sass-converter <3.0.0 but couldn’t get that to run (maybe a fools errand?). Many google searches where the first page of links are all purple now.

I would have by now assumed that this is a broken release, except for seeing in @sherif’s code that it’s running 4.3.2 and sass 3.0.0, and the report that eliminating “main.scss” fixed it for them.

I found this person’s post in Korean and translated it hoping to find a solution but he ended up just reverting back to jekyll 3. I notice he is using “main.scss” though, so maybe that was his problem.

I do not have anything (at this point) called “main.scss”. I removing the minima gem (which I am not using) on the off chance that was including a main.scss. I also deleted all my sass cache and jekyll cache thinking that might have something to do with it.

Does anyone have any other ideas? Or simply can vouch that 4.3.2/3.0.0 has the potential to be functional?

1 Like

Same issue here, I don’t get it :confused:

I think I have figured the issue out.

With the previous version, it was acceptable to have assets/css/foo.scss with content:

---
---
@import "foo";

which imports _sass/foo.scss

To be specific, if the two scss files (the one in /assets/css with front matter, and the one in _sass) have the same filename, this did not cause a problem. Imports were only imported from within the _sass directory, so there is no conflict if a file in assets/css and a file in _sass have the same name.

With the new version of jekyll-sass-converter, this is NOT functional. For whatever reason, now, @import will import from scss files in either _sass OR assets/css. It is possible to have a file in assets/css which imports from another file in assets/css.

Thus, if you have assets/css/foo.scss containing @import "foo";, rather than importing _sass/foo.scss it will import itself, leading to the error

3 │ @import "foo";
  │              ^
expected "{".

The solution is that after migrating to the new version, if you have any scss files in assets/css which previously imported files of the same name from _sass, the _sass/ file and the corresponding @import statement must be renamed.

For what it’s worth, I have no issue with a _sass/main.scss since that is imported via assets/css/styles.scss - the filenames don’t match.

I believe this is the same issue @thomastk was having since after he renamed main to base the error said it was while converting 'assets/css/base.scss': - it was importing itself.

3 Likes

Thank you for taking the time to share your fix. Have you found a place in the documentation that mentions this specificity?

@tomask can you try the fix from the post above and mark is as solved if it works?

Have you found a place in the documentation that mentions this specificity?

I have not seen it explicitly mentioned although it could be somewhere I’ve not found.

If you actually closely follow (only) the tutorial as it’s written, you should not immediatly have the issue since the tutorial says to create a main file called styles.scss which imports the partial file main.scss (a little confusing to say but the filenames are different). This is how I ended up with styles/main.

Still, to me atleast so I suspect also to others, it seemed naively intuitive to make one-to-one main and partial files have the same name. Since that used to work I’d call it a breaking change, and the resulting error message doesn’t give much hint at what is happening, so I was hoping people googling expected "{" (like I did) will find this.

3 Likes

why did this change happen?

the reason i like jekyll is because it’s simple and stable. this is like some error i’d expect in react but not jekyll

Hey, greenfire. I am having the same issue here. The main.scss file is in the ‘/scss’ folder and the style.scss file in the ‘assets/css’ folder. Changing import ‘main.scss’ to ‘/scss/main.scss’ doesn’t fix the issue unfortunately. Any help would be greatly appreciated!