Jekyll server running, html showing, CSS won't render.

[Elemino]

Hello,

I have been trying to get sass working with jekyll for a long time. I have tried about every solution
shown on google. From uninstalling gems, updating/changing yaml files, --- ---, reinstalling related gems, uninstalling reinstalling many different versions of jekyll, but still sass won't show.
Occasionally, changing css properties in _whatever.sass or changing text in index.html will regenerate
css on the localhost. But no sooner had I kept on working than sass freezes in the application not showing styles anymore.
I can provide code examples but rather ask if this is a known issue by now (march 2015) that I can look into and therefore fix the problem. This leads me into despair and I really don't want to give up on Jekyll. Thanks for any help, and I apologize for bringing this issue up again.

[kleinfreund]

What do you mean by “sass won't show”?

[Elemino]

"sass won't show" meaning jekyll won't spit out css styles into the index.html. I am using sass and bourbon, and trying to get jekyll to compile sass to css. Maybe I should try grunt for the task. When I revert the project to an earlier version where css clearly is showing,I try to understand what triggers the problem. and sometimes, if I change a value or a text in either _includes, index.html, or 3-modules I get jekyll to show css styles. I don't know if its either a build,listen,generate,compile, or a watch issue or something else. but I can't get css to work properly. This issue has been documented a lot in this forum. And I have spent like 15 hours trying every avenue in sight. I even tried reinstalling rvm and all of its dependencies as that proved to be effective in other posts.

[willnorris]

This certainly isn't a known issue, at least in the sense that lots of people generate sass without any issue. An example of a non-working site would be helpful... it sounds like you're looking in the right places, but without knowing exactly what it is you're changing, it's impossible to know what the problem is.

[kleinfreund]

I still don’t know what your problem is.

jekyll won't spit out css styles into the index.html

You have a Sass file somewhere that starts with the triple dashes (i.e. has front matter) that imports other Sass partials, right? For example, I have a file inside /css called kleinfreund.scss that starts like this:

---
---
@charset "utf-8";
@import
        "base",
        "typography",
        // ...
;

This will spit out a CSS file called kleinfreund.css in the same directory on building the site.

This file is usually referenced in the default.html layout with a link tag. Do you have all this?

[Elemino]

https://github.com/Elemshalit/JekyllTest001 Here it is..

I am still trying to figure out why css styles are not rendering in the browser.

[willnorris]

okay, so you've got a few problems...

First, remove assets/css/main.css. Because this static file exists, this is what is always getting loaded instead of your sass file being converted into CSS. I'm not sure if main.css is a compiled version of main.sass? If so, you don't need to check it in at all, just let Jekyll build it when needed. If it's something different, then you should rename it so that it doesn't conflict.

You also have a trailing space in the first line of main.sass which is preventing it from getting processed by jekyll. Remove that trailing space character.

Once you do that, when you run jekyll you should get the error:

Conversion error: Jekyll::Converters::Sass encountered an error while converting 'assets/css/main.sass':
Invalid CSS after "": expected selector, was "---" on line 1

This is because 1-tools/_-tools-index.sass, 2-base/_-base-index.sass, and 3-modules/_-modules-index.sass all have front-matter defined. They shouldn't. Included sass files shouldn't have front matter, only the main file that does all of the importing (in your case, main.sass). So remove the --- --- from the top of those files.

Once you do that, you should get the error:

Conversion error: Jekyll::Converters::Sass encountered an error while converting 'assets/css/main.sass':
Invalid CSS after "padding:": expected pseudoclass or pseudoelement, was "30px" on line 6

This is because you are missing a space after the ":" in 3-modules/_footer.sass. Add a space after the colon. (I honestly had no idea sass was so sensitive to whitespace in this regard... one of the reasons I much prefer the scss dialect I guess)

After that, your sass file should build fine. I'll send a pull request on your test repo with all of these changes, but I wanted to explain them here as well so you understand what went wrong. Let me know if you have trouble applying these fixes.

You should probably also add .sass-cache and .jekyll-metadata to your .gitignore file... neither of those should really be checked in to version control.

[willnorris]

And just to show that these changes are working:

[Elemino]

Perfect! Thank you so much for getting me up and running!To both of you. @kleinfreund @willnorris
Everything is MUCH clearer now. I'll update more if I may throughout the development stage if any other issues arise. I will look into your fix more closely tomorrow, but as of now, I can attest to your assumption that sass is indeed sensitive in this instance. Don't use spaces sparingly when you indent that's for sure.

[troyswanson]

🤘 Thanks guys for the assist!

[amaliebarras]

I was having these same issues, these suggestions fixed. Thanks a ton!

[Elemino]

Cool!

[dret]

having the same problem at http://dret.github.io/HTML5-overview/ which misses main.css on github.io, but works just fine on my local install. is there any way to see the "jekyll console" for the github-hosted page? it seems a bit opaque to even understand what's going on.

[parkr]

@dret Open the developer console in your browser. The URL is wrong. Set "baseurl: /HTML5-overview" in your config or use "site.github.url" in those lines in _includes/head.html

[dret]

On 2016-07-12 19:54, Parker Moore wrote:

@dret https://github.com/dret Open the developer console in your
browser. The URL is wrong. Set "baseurl: /HTML5-overview" in your config

https://github.com/dret/HTML5-overview/blob/gh-pages/_config.yml#L14
seemed to say just that, but now that you've pointed it out, i realized
i had the casing wrong. switched to lowercase "overview", and now it
works like a charm. thanks so much for your advice!

dret/HTML5-overview@1e82208

[RahumanBinHussain]

I am having this same problem. can somebody fix this?

https://github.com/RahumanBinHussain/FrontFolio

[so0k]

for anyone coming here from google, another reason may be a change in the minima theme (the default jekyll theme): https://github.com/jekyll/minima#customization

The site's default CSS has now moved to a new place within the gem itself, assets/main.scss

perhaps the blog was created with an older version of the gem (putting the Gemfile.lock in git helps to ensure gem version is consistent across environments)