I have a problem with a project in Laravel, the problem is that when you edit CSS code or add images and reload the page, changes do not apply.
eg I had an image called 1.jpg which was then deleted, replaced with 2.jpg. I edited the code calling the image 2.jpg, but even after reloading the page, 2.jpg is not displayed.
It is not browser cache - I've tried clearing it, but the issue remains. This also happens to me when I edit CSS - the changes are not applied. Any ideas? I've used Sublime text 2 and 3 with windows 8.1.
I've tried php artisan cache: clear, deleting the cache of the project, and no luck. I'm going crazy, can anyone suggest what to do?
If you are adding the css in the resources/sass/app.scss then you need to run after it npm run dev , this will compile your css.
I suggest adding the css internally in the file in the head tags or even inline css. But everytime you make changes to your resources/sass/app.scss you need to run npm run dev
Related
I have wagtail project, in this project I compile scss with webpack to the static folder in my project. When i have devtools open (and i checked the no cache checkbox) and then reload the page, the css is loaded. When i hard reload (clear cache etc) the new updated css is applied. If after this i press f5 again the previous older version is loaded.
How and why is this happening? This is the first time i've encountered this problem.
maybe it doesn't override the cache with the new css?
I am running chrome version: 98.0.4758.109
The browser is loading from the cache. I had the same problem and the cleanest way that I found to solve it was adding the "version" to the files. For example:
<link rel="stylesheet" href="styles.css?v=1">
Obviously, when you want to upload it again, increase the number (v=2).
Eventually fixed this with adding hashes in the build files with webpack. So the filename wouldbe eg: main.2738547.css
In my dev environment the site looks as expected, however when I run gatsby build my CSS does not display properly. If I manually navigate to another page then the CSS displays as expected.
There are no errors but I do get this warning:
The resource
http://localhost:9000/static/d/520/path---offline-plugin-app-shell-fallback-a-30-c5a-NZuapzHg3X9TaN1iIixfv1W23E.json
was preloaded using link preload but not used within a few seconds
from the window's load event. Please make sure it has an appropriate
as value and it is preloaded intentionally.
When I inspect that file it shows:
{"pageContext":{}}
The fact that that object is empty is my issue I assume. I have tried disabling the service worker but that only made the issue worse.
I've also tried
forcing a build and disabling the cache on netlify,
deleting npm and package.json files and then running npm build,
but no luck so far.
This could be related to the fact that main component e.g Layout unmounts and remounts on every page.
Try to refer your css files in gatsby-browser.js file which is provided by default and is located in the root of your project.
For example you could try do following:
// gatsby-browser.js
require('./my-global-styles.css')
It'll also work with gatsby-plugin-sass
// gatsby-browser.js
import './src/styles/my-global-styles.scss'
For more info visit: https://www.gatsbyjs.org/docs/browser-apis/
I have the same issue. In my case, gatsby-plugin-styled-components was missing in my gatsby-config.js.
https://www.gatsbyjs.org/packages/gatsby-plugin-styled-components/
https://github.com/gatsbyjs/gatsby/issues/8984
I am new to git and new to phpstorm so this may be stupid, but, I am working on a css file for a magento site, I have git enabled and all files are added to the repository (they are all green).
I made some changes to the css file, but when I refresh the site which I am running locally, no changes show.
Do I need to commit the changes everytime? I know when I commit a change I get the dialog box asking for comment etc. This seems kind of slow when dealing with css as I often want to just save the file quickly, and refresh the page to see if everything works as predicted.
Or am I understanding git wrong?
No you don't need to commit changes. Your problem is probably cache. Browser or magento cache for css files. Try to refresh with Ctrl + F5
I'm currently running Compass and Bootstrap 3 through a Vagrant VM Box.
I've managed to successfully setup the project using both the Compass and Bootstrap Gem's.
I've now started writing my styles. Upon save I can see which files have been modified and if a the CSS has been re-compiled through SuperPuTTY, when using compass watch --poll. However, when either compiling via compass watch or through compass compile, I only occasionally see the changes through my browser.
I don't believe this to be a browser caching issue, as I've turned it off via dev tools, I've also tried clearing the cache, as well as directly opening up the newly compiled CSS and adding a ?1234 cache buster to the end of the URL. I'm also getting no errors upon compile (these are also normally displayed within SuperPuTTY).
I have a suspicion the problem may lay in the bootstrap plugin as this require 'bootstrap-sass' is loaded in the config.rb file, I'm currently investigating this.
Is anyone aware of any fixes for this, or aware of any issues/bugs with Compass compiling the Bootstrap SCSS code?
/------ UPDATE ------/
After further investigation this seems to be a caching issue. The file seems to be correct on the server after compiling, but when it arrives at the browser it seems to retain the old version. The browser cache is disabled, this is where my confusion now lays, as it should request a new file upon refresh.
We seemed to have fixed the problem by adding a no-cache rule for our header, and also disabling sendfile in the Apache vhosts file. This combination seems to have resolved the issue
I am trying to update the font in a rails app - specifically the text in a brand class in the top navbar. I was successful in changing the font using google web fonts already, but now when I try to update the font again, it seems to be "stuck" on the last font I used. I precompiled assets before deploying to heroku, which is what I think may be causing the problem. Now the changes are not updating locally or in production.
I have done a few things to troubleshoot but none seem to be working:
Restarted the rails server
Emptied the cache folder in the tmp folder
Deleted public assets
Tried precompiling assets again - the font change does not work locally or on heroku
Tried targeting a more specific css selector (.navbar .brand versus .brand - it worked earlier for .brand so don't think that is the issue)
Cleared browsing history
Any ideas on what may be causing this?
Are you using turbolinks? If so, read this
Asset change detection
You can track certain assets, like application.js and application.css,
that you want to ensure are always of the latest version inside a
Turbolinks session. This is done by marking those asset links with
data-turbolinks-track, like so:
<link href="/assets/application-9bd64a86adb3cd9ab3b16e9dca67a33a.css"
rel="stylesheet" type="text/css" data-turbolinks-track>
If those assets change URLs (embed an md5 stamp to ensure this), the
page will do a full reload instead of going through Turbolinks. This
ensures that all Turbolinks sessions will always be running off your
latest JavaScript and CSS.
When this happens, you'll technically be requesting the same page
twice. Once through Turbolinks to detect that the assets changed, and
then again when we do a full redirect to that page.
Stupid mistake - had a navbar class styled in my css with font-style: monospace. After clearing that, everything worked - hopefully the troubleshooting steps help others!
View your page source and search for the font src. If you can't find it skip to 3.
Test the font and display code outside of the rails apps to make sure it is the asset pipeline.
If the src and display code work, provide your application.css and application.js to check your manifests.
What config files/code have you changed since your last assets:precompile that is not working properly.
My similar issue: Bootstrap, jQuery, and the Rails asset pipeline