Can't get custom css is load

Help
1

I’ve tried just about everything I could find on getting custom css or scss working on Jekyll and so far nothing works. Even this simple 3 step process didn’t work - https://help.github.com/articles/customizing-css-and-html-in-your-jekyll-theme/

Right now, I’ve followed the help.github example. I’ve got file under /assets/css/style.scss that looks like this:

@import “{{ site.theme }}”;
p {
color: blue;
}

No extra whitespaces or newlines anywhere. However when I look at the styles on the webpage, my CSS is nowhere to be found. Its like Jekyll isn’t loading my custom style at all.

I am a little befuddled as to why there isn’t a simple “This is how to write your own CSS in Jeykll” guide. The Github example clearly doesn’t work and the actual Jekyll site doesn’t explain how it is done at all. Clearly is possible because people are doing it but the documentation is quite bad.

2

my style.scss appears to exist in the _site folder, however it is not being loaded by the website at all. If I copy the contents from the style.css that Jekyll generates and paste it into the main.css that the site is using, I see my changes. So for whatever reason, Jekyll is copying my scss file but not loading it.

Is there some obscure piece of documentation I missed here because this seems like really strange behavior. Do I need to manually add a reference to my css file or something?

1 Like
3

Alright on a hunch I tested something and it “fixed” the issue -

I looked at the index.html generated under _site and saw a line that said:

So I created a new folder called “assets/”, moved my scss file to it and renamed it “main.css”. I reloaded my page and voila - it worked.

So I have two questions:

  1. How does one add references to new style sheets without manually modifying the index.html?
  2. Why doesn’t any of the documentation about styling Jeykll even so much as mentioning either manually adding references or naming your scss file to match the existing css file loaded by the page?
4

It depends. Are you using a theme? Or do you have your own set of _layouts and _includes in the root of your project?

If you it’s the later you just need to find the file that calls in the CSS file and change that name/path. If you’re using a theme then you’ll need to dig into their source code and override whatever file includes the CSS.

If you have a public repo it’ll be much easier for someone to offer suggestions on a path forward.