VSCode gives an error saying “{ expected” at Line 4 of main.scss. However, I’ve made no changes to assets/css/main.scss, no errors anywhere in the file itself. I was able to build my Jekyll site before with no problems with this exact same file. All I’ve changed are the contents of the files I’ve imported into the main.scss file.

The Jekyll build error says

Error: unmatched "}".
    ╷
177 │ }
    │ ^
    ╵
  /home/konomu/konomu.github.io/_sass/_default.scss 177:1  @import
  _-sections-dir.scss 3:9                                  @import
  /home/konomu/konomu.github.io/assets/css/main.scss 32:9  root stylesheet 
  Conversion error: Jekyll::Converters::Scss encountered an error while converting 'assets/css/main.scss':
                    unmatched "}".
             Error: unmatched "}".
             Error: Run jekyll build --trace for more information.
                    

Now jekyll refuses to build any new changes I make to the scss files.

Here is my main.scss

---
---

$sans-serif-font-family: "Hack", "Noto Sans JP", monospace;
$serif-font-family:      "PT Serif", Georgia, "Times New Roman", serif;
$code-font-family:       "Source Code Pro", monospace;
$mahjong-font-family:    "Tile Regular";

$body-color:             #fff;
$link-color:             #ed00b5;

$code-background-color:   #333;
$pagination-button-color: #e0e0e0;

$dark-gray-color:        #333;
$light-gray-color:       #999;
$extra-light-gray-color: #ccc;
$new-dark-color:         #0F0F0F;

$container-responsive-width: 768px;
$elements-responsive-width:  50em;

$icon-transition-time: .5s;
$envelope-color:       #f39c12;
$twitter-color:        #00aced;
$instagram-color:      #375989;
$github-color:         #343434;
$linkedin-color:       #0073a4;
$facebook-color:       #3d5b99;
$pinterest-color:      #bd081c;
$medium-color:         #00AB6C;
$codepen-color:        black;
$rss-color:            #ff6600;

@import "-sections-dir";

And if it helps, the last changes I made to the scss before the site broke was in _sass/_default.scss, which is imported into -sections-dir (in turn imported into main.scss). The change I made was adding width: 12.1rem; and background-color: #333; to .navigation.

  }

  .navigation {
    left: -12.1rem;
    height: 100%;
    position: fixed;
    top: 0;
    transform: translateX(0);
    transition: transform .25s cubic-bezier(.4,0,.2,1),box-shadow .25s;
    z-index: 5;
  }
}

Even when removing those lines, commenting them out, commenting out the entirety of default.scss , I’m still getting the “{ expected” error in VSCode.