Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

🐛 BUG: no CSS in production for projects with >1 page. #2151

Closed
tkon99 opened this issue Dec 7, 2021 · 4 comments
Closed

🐛 BUG: no CSS in production for projects with >1 page. #2151

tkon99 opened this issue Dec 7, 2021 · 4 comments

Comments

@tkon99
Copy link

tkon99 commented Dec 7, 2021

What version of astro are you using?

0.21.11

What package manager are you using?

npm

What operating system are you using?

Windows (reproduced in Linux)

Describe the Bug

Weirdest bug. There is still no CSS tag included in <head> (i.e. it disappears) when using a layout component that's referenced by more than one page.

To reproduce (example below):

  1. The example comes with two pages (index.astro & about.astro), first run npm run build and npm run preview, and observe the breaking CSS.
  2. Then remove about.astro and run npm run build and npm run preview again, CSS is included correctly now.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-2qvskx-cdcoua?file=src%2Fpages%2Fabout.astro&on=stackblitz
@tkon99 tkon99 changed the title 🐛 BUG: no CSS in production for projects with >1 pages. 🐛 BUG: no CSS in production for projects with >1 page. Dec 7, 2021
@drwpow
Copy link
Member

drwpow commented Dec 7, 2021

This might have to do with some behavior of <head> tags. When using layouts for .md files, the layouts correctly are able to control the <head> tag.

However, when using layouts as a component wrapper for another page, there are issues with resolving <head> elements properly so they are likely getting dropped.

What I’d recommend doing is moving <head> and <body> into pages/*.astro. You can dedupe your style & head tags into a <MainHead> component, like so:

---
import MainHead from '../components/MainHead.astro';
import BaseLayout from '../layouts/BaseLayout.astro';
---
<html>
<head>
  <MainHead />
</head>
<body>
  <BaseLayout>
    <h1>Page Content</h1>
  </BaseLayout>
</body>
</html>

Does this work as a workaround for now?
Of course this will likely mean

@tkon99
Copy link
Author

tkon99 commented Dec 7, 2021

Does not seem to work either.

@amithgeorge
Copy link

@tkon99 The newest Astro version 0.21.12 had fixed a similar issue I had reported. I forked your repro just to check, your issue seems to be solved with the newer version. Please update and check.

@jonathantneal
Copy link
Contributor

Thank you, @amithgeorge!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@jonathantneal @amithgeorge @drwpow @tkon99