kind minnow
Having an issue when running astro preview that my global stylesheet and some other assets are receiving a 404. I am using the latest version of astro and @astro/node.
Researched similar issues on Github as well as the Discord.
Discord similar issue: https://discord.com/channels/830184174198718474/1223971400914567199
Github similar issue: https://github.com/withastro/astro/issues/9093
All to no resolve. Cannot deploy my app in production. Any help is appreciated.
lone adder
Difficult to help without seeing anything that you're doing.
kind minnow
Hey Henri here is my repo: https://github.com/frankievalentine/v3frankie.me
lone adder
If you're going to provide your own Tailwind base styles, you need to provide the override in config:
kind minnow
Applied false to the base styles tailwind plugin and it looks like the build completely removed the stylesheet. Providing some screenshots of before and after applying as well as the dev server.
Before base styles
After:
lone adder
The way I do it is to create a separate tailwind.css file and import it into my BaseLayout.astro
kind minnow
The way I do it is to create a separate `tailwind.css` file and import it into m...
Yes, I have it imported to my Head.astro component currently
I will try separating them
No luck separating and importing to base layout
lone adder
I got your repo loaded into StackBlitz and it crashed complaining about the lock file. I deleted the lock file and pnpm i and then pnpm dev and it worked. I moved your global.css import from Head.astro to Layout.astro, modified the Tailwind config, and everything appears to work as expected, in Dev.
I wonder if the issue you're having with Preview is due to having your styles/ folder outside your src/ folder.
kind minnow
Well, yes, the dev server runs perfectly. It's the build output that is the concern. Tried moving the styles folder into src with no luck and removing the lock file, modules, etc. Same result.
I don't think its an issue with importing the styles because the dev server runs fine, I believe its a build issue.
lone adder
If you move the styles folder, don't forget to also update the alias in the tsconfig.ts
kind minnow
Yeah I did that as well
lone adder
Sorry, can't read anything on that screenshot
kind minnow
Yeah unfortunately you have to open in browser and zoom
lone adder
Tried zooming in, but then it just gets blurry
kind minnow
Just didnt want to flood the thread with a code block, but I can if it is helpful
lone adder
That's OK, I managed to get it to build and preview in StackBlitz. I'm seeing the same issue... no styles.
Looking at the generated dist/ folder. I see dist/client/ and dist/server/and your website code appears to be in the former. However, the *.css file is in the latter, in dist/server/assets.
If I move dist/server/assets/asset.Bmv_YPYF.css to dist/client/assets/asset.Bmv_YPYF.css and refresh, the site loads with all the styles as expected.
So the mystery is: why is the CSS file in the wrong folder?
kind minnow
That is strange, I am not sure. Something with Vite maybe?
I can provide my build output, but I am not showing any errors on build
lone adder
You've got a lot of stuff in there I'm not familiar with, but in your Astro config I found this section:
vite: {
build: {
rollupOptions: {
output: {
entryFileNames: "entry.[hash].mjs",
chunkFileNames: "chunks/chunk.[hash].mjs",
assetFileNames: "assets/asset.[hash][extname]"
}
}
},
plugins: []
}
where the assetFileNames pattern matches the output filename. So that's probably where it's coming from, but it doesn't explain why it's going to the wrong place in dist/
kind minnow
Ah I do see the association there because my assets folder was empty
lone adder
<@&1129102257422610512> anyone around that can lend a hand here?
When doing a pnpm build and pnpm preview, the CSS file ends up in dist/server/assets/asset.Bmv_YPYF.css instead of dist/client/assets/asset.Bmv_YPYF.css
So the site loads with no styles. Works as expected in Dev.
See Vite section above from astro.config.mjs
kind minnow
But, yes that would have just been for the assets
fluid siren
Do you have the stackblitz link @lone adder ?
distant stump
Yeah I saw this and was confused about it
lone adder
Hmm... I loaded it from his repo and don't see the usual "share" option. Looks like I'd have to do a commit first
distant stump
I guess we should try to identify which version of Astro introduced it
When I first saw it it was about vercel
But I guess it’s not adapter specific
lone adder
Got a broken lock file warning on the first time. Had to delete the lock file and pnpm i
@distant stump is there already an issue filed for Vercel?
Is this an Erika thing?
distant stump
#general message
I don’t know if there’s an issue or what’s going on with it
I briefly looked in change log to see if there was something that might be related to this
Driving right now though
kind minnow
Hey all, think I figured it out.
I believe it was the vite rollup options I had on my Astro config
fluid siren
I was just about to say that lol
They are overriding the default build commands for the client. Which is why they end up in dist/server
kind minnow
Sorry about that, weird one. Should have thought to remove that first.
fluid siren
All good!
kind minnow
Thanks for your help Henri and team.