Moving CSS imports from Layout.tsx to _App.tsx breaks styles

bjesuiter commented 1 year ago

For some reason, the styles of the website are broken (e.g. not loaded at all), when the reset.css and postcss/global.css are imported in _App.tsx instead of in Layout.tsx. This behavior also persists after completely restarting the dev server.

// Layout.tsx
export default function Layout(props: LayoutProps) {
  return (
    <>
      {
        /* <Head>
        <title>Audio Logbook</title>
        <link rel="stylesheet" href="/reset.css" />
        <link rel="stylesheet" href="/postcss/global.css" />
      </Head> */
      }
      <header>
        <h1>{(props.h1Override) ? props.h1Override : "Audio Logbook"}</h1>
        <div class="flex-gap"></div>
        {/* TODO: Put Date Seletor here? */}
        <ThemeSwitcher />
        <UserInfo user={props.user} />
      </header>

      <main>
        {props.children}
      </main>

      <footer>
        <pre>Deployment: {DEPLOYMENT_ID}</pre>
      </footer>
    </>
  );
}

// _App.tsx
export default function App({ Component }: AppProps) {
  return (
    <html data-custom="data">
      <Head>
        <title>Audio Logbook</title>
        <link rel="stylesheet" href={asset("reset.css")} />
        <link rel="stylesheet" href="/postcss/global.css" />
      </Head>
      <body class="bodyClass">
        <Component />
      </body>
    </html>
  );
}

bjesuiter commented 1 year ago

Discovered while working on issue #15

bjesuiter commented 1 year ago

Documentation for AppWrapper: https://fresh.deno.dev/docs/concepts/app-wrapper

bjesuiter commented 1 year ago

Fixed the problem by renaming the file from _App.tsx to _app.tsx as written in the docs 🤦‍♂️

codemonument / deno_audio_logbook

Moving CSS imports from Layout.tsx to _App.tsx breaks styles #32