Search code examples
csssassjekyll

Error Trying to Use Multiple SCSS files in Jekyll

I am working on a website with Jekyll. I want to use multiple SCSS files. I was able to successfully add a main file but I am having issues after that.

My directory structure is:

_sass/main.scss

_sass/post.scss

_sass/apps/app1.scss

_sass/apps/app2.scss

There is a corresponding scss file for each of these in assets/css. For example, assets/css/main.scss.

Each file in the _sass directory contains my styles. Each file in the assets/css contains code such as

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

I am able to access my assets/css/main.css file when I bundle the website.

However, I get the following error and cannot access the other files.

Conversion error: Jekyll::Converters::Scss encountered an error while converting 'assets/css/post.scss':
                    expected "{".
             Error: expected "{".
             Error: Run jekyll build --trace for more information.
Solution

  • After some searching, I found the answer. It appears that a file in the _sass folder and the assets/css/ folder cannot have the same name. Changing the name of one of them fixed the issue.