Main.css ignored unless modified

codedbypm · February 26, 2017, 12:06am

Hi everyone,

I’m relatively new to Jekyll and I have an issue which I can’t seem to solve myself.

Every time I execute jekyll serve from shell jekyll keeps using the main.css of the current theme and ignoring my custom main.css. If I modify my main.css, then jekyll uses my css.
How can I solve this annoying issue?
Thanks

Best
P.

gynter · February 26, 2017, 9:45am

Please provide more information about Your code. How the CSS is being loaded (in which order etc). If possible then link to repository. Also be sure that You’d always clear cache for browser or use incognito mode when making changes to code.

codedbypm · February 27, 2017, 9:16pm

Here is the link to the repo https://github.com/codedbypm/papaya

joebuhlig · February 28, 2017, 2:09am

It looks like you’re missing the head.html include. In my site, I define all CSS/JS in the head file and then include that in the base layout. For reference:

github.com

joebuhlig/joebuhlig_com/blob/master/_layouts/default.html

<!DOCTYPE html>
<html>
  {% include head.html %}
  <body>
    {% include header.html %}
    <div class="page-content">
      <div class="wrapper content-wrapper">
        {{ content }}
        <div class="copyright">{{ site.copyright }}</div>
      </div>
    </div>
    {% if jekyll.environment == "production" %}
    <!-- Global Site Tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-41316549-1"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments)};
      gtag('js', new Date());

      gtag('config', 'UA-41316549-1');

This file has been truncated. show original

github.com

joebuhlig/joebuhlig_com/blob/master/_includes/head.html

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Domain verifications -->
<meta name="bitly-verification" content="ac0f04117b06">
<meta name="p:domain_verify" content="92caa79b9e843a42436dface55a7595f">
<!-- Page info -->
<title>{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}</title>
<meta name="description" content="{% if page.excerpt %}{{ page.excerpt | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.description }}{% endif %}">
<!-- Stylesheets -->
<link rel="stylesheet" href="{% if jekyll.environment == 'production' %}{{ site.cdn_url }}{% endif %}/assets/css/main.css?v={{ site.version }}">
<!-- Feeds -->
<link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.url }}">
<link rel="alternate" type="application/rss+xml" title="{{ site.title }}" href="{{ "/feed" | prepend: site.url }}" />
<link rel="alternate" type="application/rss+xml" title="{{ site.title }} - Articles Only" href="{{ "/feed/articles" | prepend: site.url }}" />
<link rel="alternate" type="application/rss+xml" title="{{ site.title }} - Podcast Only" href="{{ "/feed/podcast" | prepend: site.url }}" />

<!-- Favicons and icons -->

This file has been truncated. show original

codedbypm · March 1, 2017, 10:58pm

But my base.html layout looks like this

<!DOCTYPE html>
<html lang="en">
  {% include head.html %}

  <body>

{% include nav.html %}

{{ content }}

{% include footer.html %}

{% include footer-scripts.html %}

  </body>
</html>

so there is a head.html included. In fact it’s taken from the gem-based theme itself, and since I do not override it, it’s not present in my repo. I tried copying it in my project but still it does not work. I always must dirty the main.css file so that jekyll loads it correctly. Why is that so?

joebuhlig · March 2, 2017, 12:19am

Right! I’m used to non-theme Jekyll.

ashmaroli · March 2, 2017, 2:41am

I think the problem could be traced to the following:

If an asset file doesn’t have YAML FrontMatter Dashes, its a StaticFile. Apparently, non-binary StaticFiles are loaded only when they are modified.

github.com

jekyll/jekyll/blob/master/lib/jekyll/readers/theme_assets_reader.rb#L22-L34




private
def read_theme_asset(path)
  base = site.theme.root
  dir = File.dirname(path.sub("#{site.theme.root}/", ""))
  name = File.basename(path)


  if Utils.has_yaml_header?(path)
    append_unless_exists site.pages,
      Jekyll::Page.new(site, base, dir, name)
  else
    append_unless_exists site.static_files,
      Jekyll::StaticFile.new(site, base, "/#{dir}", name)

github.com

jekyll/jekyll/blob/master/lib/jekyll/static_file.rb#L84-L100


  defaults.fetch("published", true)
end


# Write the static file to the destination directory (if modified).
#
# dest - The String path to the destination dir.
#
# Returns false if the file was not modified since last time (no-op).
def write(dest)
  dest_path = destination(dest)


  return false if File.exist?(dest_path) && !modified?
  self.class.mtimes[path] = mtime


  FileUtils.mkdir_p(File.dirname(dest_path))
  FileUtils.rm(dest_path) if File.exist?(dest_path)
  copy_file(dest_path)

Resolution

I have opened a pull request at jekyll/jekyll#5918 that attempts to resolve this matter Do try the proposed solution locally at your end (use that branch in your Gemfile), and if it works, upvote on the request. Else, please leave a feedback.

codedbypm · May 2, 2017, 1:35pm

Thanks for the PR. That would fix my issue.

Topic		Replies	Views
Can't get custom css is load Help	3	2915	December 25, 2017
My Personal Website Help	1	764	July 10, 2018
Overwriting a class in a CSS Help	2	2102	February 24, 2017
Not Styling - On Localhost Help	6	1415	July 10, 2020
YAML file changes get served - but not changes made in HTML, SCSS etc Help	5	369	December 11, 2023

Main.css ignored unless modified

Resolution

Related Topics