Help - Jekyll/Sass doesn't seem to update css

Help
1

Hi there, I’ve been trying to port my website over to Jekyll, and I’m having some issues working with it now. I’ve tried updating some styles in my “theme.scss” file, but no matter what I do, the changes don’t seem to apply when jekyll builds it. I’m currently using jekyll serve --livereload to see the changes before I push them anywhere.

The Inspector on my page shows me this, which is the style I wish to change:

image
image330×108 2.75 KB

however, one quick look at the line 189 in theme.scss reveals this, changes I want to implement:

.project {
    background-color: aliceblue;
    display:block;
    min-width: 100px;
    height: 30vh;
}

I’ve tried deleting my _site directory to make sure it is being rebuilt, but no matter what, it doesn’t change, and builds itself with the older version! I have no idea where the older version keeps coming from, because that version of the file doesn’t exist anymore, yet Jekyll is somehow restoring it.

I’ve been using @import in my Sass file, which i recently noticed was deprecated, so I changed it from

---
---
@import "theme";

into

---
---

@use "theme";

Am i using this new rule incorrectly?

2

search the whole project for aliceblue to make sure that’s the same file? maybe there is another theme file?

are you using a gem based theme maybe? and then not overriding it properly for some reason?

try a different browser?

3

trying a different browser helped! I use Firefox, but i just tried Google and it showed all my changes, thanks!

Any idea if there’s a setting in Firefox that is preventing the updates?

I also wonder if it’s a case of running out of memory in some way, since Firefox worked fine for weeks until now.

4

I did a little more digging and the _site build does actually have the changes, so it seems this is purely a server/browser issue.

5

probably a caching issue - in the dev tools there is a way to disable the cache. You may also need to look at a cache busting strategy - appending the date to the end of the css file as a query parameter is an easy way.

6

If it is a cache problem, I’d recommend a plugin that I created specifically for this: Cache busting with Jekyll.

It basically creates a hash based on your sass file, so everytime there is a change in the sass file, the hash changes and forces the browser to reload it.

1 Like