[Jekyll] Problem importing the bookshop SCSS in main.scss

[bvirlet]

Hello,

I'm trying to integrate Bookshop in our Jekyll website but I'm running into an error.

Here is my main.scss:

---
# Only the main Sass file needs front matter (the dashes are enough)
---

{% bookshop_scss %}

@charset "utf-8";

// Our variables
$base-font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
$base-font-size:   16px;
$small-font-size:  $base-font-size * 0.875;
$base-line-height: 1.5;
…

I'm getting the following error when serving the Jekyll:

 Error: Invalid CSS after "{": expected 1 selector or at-rule, was "{% bookshop_scss %}" (SassC::SyntaxError)
        on line 1:1 of stdin
>> {% bookshop_scss %}

   ^
    from /Users/bruno/.gem/ruby/3.0.3/gems/sassc-2.4.0/lib/sassc/engine.rb:50:in `render'
    from /Users/bruno/.gem/ruby/3.0.3/gems/jekyll-sass-converter-2.1.0/lib/jekyll/converters/scss.rb:185:in `convert'

Do you have any idea what's going on here?

[bvirlet]

I have fonud that the problem was a conflict with the jekyll-auto-image plugin. This plugin would apparently cause the .scss files to be loaded before the Liquid variables were interpreted.