Configure global CSS in Deno Fresh

358 Views Asked by zing At 20 October 2024 at 21:52

I'm trying to link a stylesheet that will style the html and body elements in my app. At the moment I've tried using the <Head /> component but this is only sent with the component it's imported inside, so other routes don't get the stylesheet.

export default function Home() {
  return (
    <>
        <Head>
            <link rel='stylesheet' href="main.css" />
        </Head>
        ...
    </>
  )
}

Can I import this globally? Thanks.

Original Q&A

There are 1 best solutions below

zing On 09 July 2023 at 18:16

Figured it out:

Create an _app.tsx file in /routes(this wraps the entire app), and add the <Head /> component within this:

import { AppProps } from "$fresh/server.ts"
import { Head } from "$fresh/runtime.ts"

export default function App({ Component }: AppProps) {
    return (
        <>
            <Head>
                <link rel="stylesheet" href="main.css" />
            </Head>
            <Component />
        </>
    )
}

Add main.css in /static

Then the stylesheet goes to all routes.

Configure global CSS in Deno Fresh

There are 1 best solutions below

Related Questions in TYPESCRIPT

Related Questions in DENO

Related Questions in FRESHJS

Trending Questions

Popular # Hahtags

Popular Questions