There was like this conversation
๐ฉโ๐ป ๐ป๐ณ - my friend who lives in Vietnam
๐จโ๐ญ ๐ต๐ฑ - me, lives in Poland
๐ฉโ๐ป ๐ป๐ณ I fixed CSS and it was good in my local environment,
but in test environment(AWS) doesn't change anything
๐จโ๐ญ ๐ต๐ฑ aha
๐ฉโ๐ป ๐ป๐ณ could you check it on your PC?
๐จโ๐ญ ๐ต๐ฑ sure .... tadaaam css is changed on my PC
๐ฉโ๐ป ๐ป๐ณ what?? yeah exactly...
๐จโ๐ญ ๐ต๐ฑ Have you tried deleting cache?
๐ฉโ๐ป ๐ป๐ณ Yeah, I've tried it at first
๐จโ๐ญ ๐ต๐ฑ hmm... could you try to use incognito chrome?
๐ฉโ๐ป ๐ป๐ณ Just moment ... it turns out same result...
๐จโ๐ญ ๐ต๐ฑ on incognito chrome as well ??? Maybe CDN cache??
๐ฉโ๐ป ๐ป๐ณ How can I check it ?
๐จโ๐ญ ๐ต๐ฑ chrome devtool > Network > Headers > X-cache
I see I get css file from CDN(AWS cloudfront)
๐จโ๐ญ ๐ต๐ฑ and age means the time when this file was created.
so I get file which is created 118 seconds ago on CDN
๐จโ๐ญ ๐ต๐ฑ How is it on your PC?
๐ฉโ๐ป ๐ป๐ณ age is 279313, so almost 3days ago ! this is the reason !!
2 days later...
file name was like main%5BchunkHash%%5D.css
, but it should have be like 7530r9w4j0fef0we.css
(without "chunckHash")
it means version of css file.
the reason why css file name was not property was mini-css-extrace-plugin version.
after my friend updated version, everything was ok ๐
according to AWS doc, if css name is not included version identifier, cache doesn't update.
Top comments (2)
Another solution could be to invalidate the CloudFront cache :)
if you want the CSS to change, you must append a parameter to the CSS file name in HTML, e.g. timestamp
example: "main.css? t = 1650090838"