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.
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:
I ignored this in the past because I got the syntax from the Jekyll tutorial, and it worked before.
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?
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.
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.
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!
I ran into the same issue - following the tutorial verbatim as well:
having a main.scss in the _sass-folder (and putting the “make font green”-snippet there)
having a styles.scss in the assets/css folder and putting the snippet from the original post there.
Renaming “main” to “base” didn’t do anything and since the names of the files have never been identical in the first place, maybe it’s just me being new to Jekyll, but what exactly is the fix?
How can I change it? And is there a possibility to include the changes in the tutorial, since apparantly people have been running into this same problem for over a year by now?
I can’t edit my post anymore (I edited out a typo today), but I did some further testing and apparantly, the error only occurs when using Windows.
It builds perfectly fine on Linux, so there must be a missing code snippet on the tutorial for the Windows users out there.
Another important finding: Looking into the Gemfile.lock, that’s what I found:
