CSS file is not updated

[Salemoche]

Hello

I've just started my first processwire project and have set the back end to my liking. Upon starting the front end of my site I encountered a very strange problem: The CSS file is not updating.
I started off and soon the problem occured. I then simply copied the contents of main.css to a new main2.css file, changed the code in the template file, and it worked again. Thinking it was a one time thing I continued, but it didn't take long for the problem to happen again.
Locally the files are changed and the html code of my project is updating normally, but when I inspect the page, the changes in the CSS file are nowhere to be seen.

I'm using MAMP to create the local server and Koala to compile my SASS Code.  I'm new to processwire and am still pretty early in my web developer career, nontheless I'm very confused about what's happening, since the problem is only partially occuring in the CSS file and not in the HTML (or php) file.

Does anyone have an idea as to what the problem could be?

Thanks in advance

[rick]

Hi @Salemoche,

Welcome to the forum!

Having a css file not load is usually due to the file not being found. I know you said you changed to a new css file and it worked until whenever. Which leads me to a bunch of questions.

How do you have your frontend structured (delayed output)?
Are you using auto prepend/append?
Does the problem occur when you navigate to a different page?
Does the problem go away when you navigate back to the page where it was working?
Is there any error shown in the dev tools console?

Sorry for all the questions, but there needs to be more information in order to track down the culprit.

[Salemoche]

1 minute ago, rick said:

Hi @Salemoche,

Welcome to the forum!

Having a css file not load is usually due to the file not being found. I know you said you changed to a new css file and it worked until whenever. Which leads me to a bunch of questions.

How do you have your frontend structured (delayed output)?
Are you using auto prepend/append?
Does the problem occur when you navigate to a different page?
Does the problem go away when you navigate back to the page where it was working?
Is there any error shown in the dev tools console?

Sorry for all the questions, but there needs to be more information in order to track down the culprit.

hey @rick

Alright let me answer your questions:

Yes I use a delayed output with an init.inc file prepended and a main.inc file appended. I use an a little bit more complicated version I found here, which, works even better for me structure wise. I use one main.css file and several specific files for single pages and it happens with each of them (strangely enough when I started working again after the weekend it had applied the recent changes but then continued to fail updating). That means that it's not page specific but rather happens on the whole site. 
There are no errors shown.

The two things that bug me are that 1. it only happened after a while of working properly and 2. there's no obvious error, just two files that are supposed to be the same but aren't.

[horst]

Have you disabled or refreshed browser caching?

Have you checked the files in local and or FTP directory? or do you only noticed this "not changing" in the website by using the browser?

[Salemoche]

2 hours ago, horst said:

Have you disabled or refreshed browser caching?

omg this might have been it

i had read that by pressing cmd + r the cache is automatically emptied, but apparently that isn't the case

thanks a lot for the tip

[dotnetic]

@Salemoche Obviously this is the same question you asked on http://stackoverflow.com/questions/43854601/css-is-not-updating-in-processwire. Maybe give me an upvote there if my solution helps you.

Here is my answer again:

This is most likely a problem with caching. Please read https://varvy.com/pagespeed/leverage-browser-caching.html for example, to understand what browser caching is and what task it accomplishes.

On this page under "Common caching issue" you find your problem.

If you are using Chrome, open the Dev Tools (F12) and under the Network tab check "Disable cache".

In Firefox open the Firefox Toolbox (also F12) and under Settings > Advanced settings check "Disable HTTP-Cache if Toolbox is open" (I translated this from a german Firefox).

After that make changes in your CSS file and reload the page. If your changes appear then you know you stumbled into one of the pitfalls of browser-caching.

There are many strategies to deal with this "problem". Take a look at https://css-tricks.com/strategies-for-cache-busting-css/ for some solutions.