Not able to see CSS changes

I have looked at these similar topics but was unable to resolve the issue for myself… I have spent hours trying to figure this out when I should be developing the site, so this is beyond frustrating.

https://local.getflywheel.com/community/t/css-changes-not-reflected-in-browser-win-10-2-0-4/1833

https://local.getflywheel.com/community/t/css-styles-not-being-applied-mac/1847/14

I am using the latest version of Local for Windows. Changes I make to any theme file are immediately reflected on my site. However, changes I make to my CSS file are not - a cached version of the file is served. This is happening in Chrome and Firefox (latest versions for each). I am using the “Preferred” site setting, with Dev mode On (and have tried it off as well).

I have gone through the steps recommended in the threads above, including:
Doing Hard Refreshes
Dev tool setting: Disable cache (while DevTools is open) - Chrome + Firefox
Stopping and restarting the site in Flywheel Local
turning dev mode on and off in FWL
installed and turned on Cache Killer extension in Chrome

There ARE 2 things that work, but are ridiculous to add to a workflow:
Restarting the local machine in Flywheel Local (which takes a while)
renaming the css file, doing a hard refresh in a browser (so that no css file is loaded), going back to rename the file correctly, then going back to do a hard refresh in the browser

Also, I’ve noticed that when you look at the local site files, there is a folder called “cache” in “wp-content”… what is that?

If I have missed something or someone else has run into and figured out this issue, I’d appreciate some help. At this point I am literally unable to work unless I use a different application!!

Hi Jamie,

Sorry for the frustration!

The cache folder must be from a caching plugin. Local doesn’t do any WordPress caching outside of Varnish in the Preferred environment.

Also, have you tried using the Custom environment?


P.S. Thanks for the detailed write-up!

I chose the preferred environment because I intend to move the site to Flywheel hosting when complete… (and that’s what is recommended, no?)

What settings would you suggest for the Custom environment?

Yup, that’s what’s recommended! I’m only asking for the sake of troubleshooting.

I would use PHP 7.1, nginx, and MySQL 5.6. That’s pretty close to what Preferred is minus the Varnish caching layer.

I’m having almost 1-1 issue with this same thing. Essentially a hard refresh is the only fix here. I’m in love with absolutely everything about Local, but this simple issue is a bummer. Hope some sort of solution can be made soon.

I’m having the exact same issue as described above. CSS changes are not being updated on the local site. I’ve tried clearing the browser cache, and different browsers with no success.

This bug is essentially rendering Local unusable for me at the moment. If there are any more details you need please let me know. Happy to help to get this resolved ASAP.

Hi @nmattox,

Are you on macOS or Windows?

Also, are you using the “Preferred” environment or the “Custom” environment? If you’re running Preferred, is “Dev Mode” enabled (top-right of site details)?

Hi Clay,

Using Windows 10. I found a couple other threads about a similar CSS issue and tried using a “Custom” environment as you advised the user above and activated dev mode but no luck.

I’ve since downgraded back to version 1.4.5 and all new CSS edits were loaded immediately as expected. Is there any other setting I might be missing using v2?

Interesting! Was this site created in 1.4.5 or created in 2.0?

Exact same issue as the OP for me.
Imported a WP site into Local version 2.0.6 on Mac OS Sierra, only a few hours ago.
Chose preferred option.
PHP 5.6.20
MySQL 5.6.36
Nginx
I don’t have the option of changing any of these options like I do with sites that I created with Local.
No caching plugins.
Dev mode off (I don’t know what this does).

This is the css file I am changing, but as you can see, it is appended with ?=ver4.8
if i navigate to the same file without the suffix, I can see my changes. I’m not quite sure what is adding this version number to the end of the string, but it seems to be being cached somewhere.

Let me know if I can provide anymore information to help with this.
Thanks,
Robey

Hi @robey,

Can you please try enabling Dev Mode? This disables the Varnish caching layer.

I created the site using 2.0

@clay enabled dev mode, didn’t seem to make a difference. the only thing that helps is restarting the virtual machine.
I did notice these characters in the ‘cached’ CSS file

@nmattox,

After downgrading did you restart the site or simply open it?

Also, the “Dev Mode” option shouldn’t be available for “Custom”. Do you have the option to switch between nginx and Apache for the web server?


@robey,

Thanks for the screenshot!

In that case can you try switching to Custom? Export the site then re-import it using the “Custom” environment to do so.

Let me know if the issue persists.

Sure, I’ll try that, what options should I select in Custom?

The defaults work (nginx, PHP 7.0.3, MySQL 5.5). You can also go ahead and upgrade to MySQL 5.6 if you want.

OK!

It’s working now for me, a simple refresh of the browser is showing me CSS changes.

These are the settings I chose.

2 Likes

Glad to hear!

I’m fairly positive I know why this is happening on Preferred (sendfile in nginx is enabled and shouldn’t be). We’ll address it in an upcoming update.

1 Like

Ok great!

Also, is it normal for there not to be a ‘conf’ folder when Preferred is chosen when importing? The conf folder only appeared for me after I re-imported using Custom.

Yup, conf is only available with “Custom”.