CSS file is found locally, but not in delpoy? (404)
Unanswered
American Bobtail posted this in #help-forum
American BobtailOP
I'm facing an issue, I created a minified css file and put it in the public folder, and wrote a script to load it in the _app file.
Locally everything is working fine and a css network request comes back with the content of the file, but on deploy, the request responds with 404 despite the fact that the path is correct
This is the script in the _app file
Any idea or suggestion fo this case? Thank you in advance
Locally everything is working fine and a css network request comes back with the content of the file, but on deploy, the request responds with 404 despite the fact that the path is correct
<Script strategy="lazyOnload">{`var cb = function() {
var l = document.createElement('link');
l.rel = 'stylesheet';
l.href = '/assets/criticalcss/combinedCss.css';
var h = document.getElementsByTagName('head')[0]; h.parentNode.insertBefore(l, h);
};
var raf = requestAnimationFrame || mozRequestAnimationFrame ||
webkitRequestAnimationFrame || msRequestAnimationFrame;
if (raf) raf(cb);
else window.addEventListener('load', cb);`}</Script>This is the script in the _app file
Any idea or suggestion fo this case? Thank you in advance
6 Replies
American BobtailOP
@joulev I'm not sure how import exactly works, I'm passing the critical css for each page alone, to render it when the page first loads, then load the whole css file in the _app,
it's working with the import thank you, I was just trying to optimize the largest contentful paint
it's working with the import thank you, I was just trying to optimize the largest contentful paint
@American Bobtail <@484037068239142956> I'm not sure how import exactly works, I'm passing the critical css for each page alone, to render it when the page first loads, then load the whole css file in the _app,
it's working with the import thank you, I was just trying to optimize the largest contentful paint
import "./file.css" has always been the way to import global css – i never researched how it is optimised, but if it is the global css, i suppose there better be some optimisation going onyou don't need all that <Script> boilerplate to load CSS
unless your CSS is absolutely huge, the main culprit of bad web vital metrics is your javascript anyway, not CSS
American BobtailOP
@joulev I see, thank you!