Jekyll doesn't compile scss files with `jekyll serve`

Question

I'm trying to create a website using Jekyll, and everything worked fine. Until I wanted to custom the design.

I've updated my css/main.scss in order to include my custom theme in _sass/theme.scss:

// Import partials from `sass_dir` (defaults to `_sass`)
@import
        "base",
        "layout",
        "syntax-highlighting",
        "theme"
;

I've also updated _config.yml, because jekyll serve -H 0.0.0.0 didn't compile my new sass file. I've added the following:

sass:
    sass_dir: _sass

The problem is jekyll serve doesn't compile my sass files, I always see the default css. I've also tried to copy the content of _sass/theme.scss directly at the end of css/main.scss, but nothing happened.

Until I modified one of those files while jekyll serve was running. The thing is jekyll-watch understands my updates and compile the scss files. May I have done something wrong for jekyll build don't compile sass files at the first try?

In case you need it, here my project tree:

.
├── _config.yml
├── css
│   ├── main.css
│   └── main.scss
├── _images
├── img
├── index.html
└── _sass
    ├── _base.scss
    ├── _layout.scss
    ├── _syntax-highlighting.scss
    └── _theme.scss

Does someone know how to fix this?

Thank you,

Answer 1

Ok, I get it !

You have a css/main.css files that is copied as a static file in _site/css/main.css.

The problem is that it has the same name as the css/main.scss target which is also _site/css/main.css.

So at first build :

• css/main.scss is processed to main.css
• then, when static files are copied, it is overridden by css/main.css.

Solution : delete css/main.css

Answer 2

Have you added the front matter to the top of your main.scss file?