CODEWITHSUNDEEP
htmlcsslaravelgulp
RU3
RU3

Reputation: 79

Laravel 5 is loading old css

I am editing my css located in resources\assets\sass\app.css then I run gulp watch but it seems that laravel is ignoring the changes I made in my css.

I tried editing the css directly in public\css\app.css but still when I view my page in the browser the style is not working.

For example, my page's background color is white but I changed it to red, the background of my page in the browser is still white.

When I tried the view source in the browser and clicked on the filename in the , the background-color: #fff;

Hope you get my point. Do you have any idea about this?

Upvotes: 6

Views: 16183

Answers (4)

Jquestions
Jquestions

Reputation: 1730

You should use the "cache busting" feature via versioning in Laravel mix so that each new .css file saved is provisioned with a unique id. This way, every change made will force the browser to fetch the latest version of the css file. You won't even need to then hard refresh!

Really easy to implement. Just add version() to your mix:

mix.js('resources/js/app.js', 'public/js')
  .version();

And then refer to your .js or .css asset using mix() instead of asset().

<script src="{{ mix('/js/app.js') }}"></script>

If you see cache issues with your css locally, it's only going to be worse for your site users down the line who could end up seeing all sorts of issues with out of date/sync css files.

This is the solution to this problem and everyone should use it on production env.

Upvotes: 7

Udochukwu Enwerem
Udochukwu Enwerem

Reputation: 2823

You can also use composer to refresh auto-loaded files and clear the cache. From your project root directory, run: 

composer dump-autoload

and

composer clear-cache

this should remove your old css files

Upvotes: 0

Alexey Mezenin
Alexey Mezenin

Reputation: 163898

You should clear all cache. First, clear view cache:

php artisan view:clear
php artisan cache:clear

Then clear browser cache and reload the page.

Upvotes: 9

sklrboy
sklrboy

Reputation: 451

Try to make a hard refresh. Ctrl + F5 on Windows I guess, on Mac it's Cmd+Shift+R.

Upvotes: 1

Related Questions