Why Your Laravel CSS or JS Changes Are Not Showing (and How to Fix It with Versioning)
If you’re working on a Laravel project, you might have faced this frustrating issue:
You update your CSS or JS file, deploy it to your server, but when you refresh your site… nothing changes! Even trying a hard refresh with Ctrl + Shift + R or clearing the website cache doesn’t always solve it. You check the file, and it’s saved correctly, but the browser still shows the old version.
This happens because of browser caching. Browsers often keep old copies of your CSS, JavaScript, and even font files to make websites load faster. But when you make changes, that cache becomes a headache.
Let’s look at how to fix it in a simple and effective way.
Why Are My CSS or JS Changes Not Showing?
The main reason is caching:
-
Browser Cache → Your browser keeps the old version.
-
Server/Hosting Cache → Hosting providers like Hostinger sometimes cache static files.
-
CDN Cache → If you use Cloudflare or another CDN, they might also cache assets.
So, even though you updated your code, the browser may still load the cached old file instead of the fresh one.
The Simple Fix: Asset Versioning
Laravel provides a handy asset() helper for linking CSS and JS files. Normally, you write:
<link rel="stylesheet" href="{{ asset('assets/css/style.css') }}">
<script src="{{ asset('assets/js/app.js') }}"></script>
But the problem is: the browser doesn’t know when you made changes.
To solve this, you can add a version query string at the end of the file:
<link rel="stylesheet" href="{{ asset('assets/css/style.css') }}?v={{ time() }}">
<script src="{{ asset('assets/js/app.js') }}?v={{ time() }}">Here’s what happens:
-
Every time the page loads, {{ time() }} generates the current timestamp.
-
The browser thinks it’s a “new file” (because of ?v=123456 at the end).
-
Result: it fetches the latest version instead of using the old cached one.
Apply Versioning to All Assets
This trick doesn’t just work for CSS and JS. You can use it for fonts, images, or any static file where cache might be an issue. Examples:
Fonts:
<link rel="stylesheet" href="{{ asset('assets/fonts/fontawesome.css') }}?v={{ time() }}">
Custom JS:
<script src="{{ asset('assets/js/custom.js') }}?v={{ time() }}"></script>
Images (optional, if you update them often):
<img src="{{ asset('assets/images/logo.png') }}?v={{ time() }}" alt="Logo">
When Should You Use This Trick?
1) During development: when you’re actively making changes and want to see updates immediately.
2) On production: if you’re deploying frequent updates and don’t want users stuck with old styles or scripts.
Note: Using ?v={{ time() }} always creates a new URL, so the browser will never use cache. This can increase load times a bit.
For long-term production, you might prefer Laravel Mix versioning (mix()) or Vite (Laravel’s modern build tool) which handle cache-busting more efficiently.
Final Thoughts
Caching is useful for speed, but when you’re coding, it often gets in the way.
With this small versioning trick, you can make sure your CSS, JS, fonts, and images always load the latest changes.
Next time you get stuck with “Why isn’t my CSS updating?”, just add:
?v={{ time() }}…and you’re good to go!