New CSS only updates when hard-refreshing(ctrl + f5)

seems like a browser issue.

Its to do with the browser. I went mad trying to figure out why my css wasnt updating when changed. Turned out Chrome and Safari caches the css and js files. Depending on which you use you can disable it to cache that url.

@MAVERICKCHAN - I have tested Chrome, Firefox and Edge, only Edge seemed to have no problems.

Due to browser cache, new changes will not reflect on client system...

you can use the following method to avoid this situations, however this method is not preferred in production environment due to performance issues.

CSS

<link  rel="stylesheet" href="http://localhost/style.css?<?php echo time(); ?>" />
// output 
<link  rel="stylesheet" href="http://localhost/style.css?1390846203" />

JS

<script type="text/javascript" href="http://localhost/script.js?<?php echo time(); ?>"></script>
// output 
<script type="text/javascript" href="http://localhost/script.js?1390846328"></script>

for production performance you can remove extra code

?<?php echo time(); ?>

@OX - different browser has different behaviors. sometimes , when using webpack , compiled css or js will not take effect until a very hard refresh.

i am using MacOs as a dev machine , using laravel has the same issue. But if you switch to vue-cli , it has no problem.

i don't know why either , tried everything you did , now , just hard refresh ...... i am getting use to it

Try using mix()

https://laravel.com/docs/5.8/mix#versioning-and-cache-busting

I always just keep the browser developer tools open with 'cache disabled' checked