Deno Fresh: How to Import external CSS

You can utilize the Head component of Fresh to inject external CSS or javascript into the head section of the output HTML file.

Create a file components/layouts/container.tsx

import { ComponentChildren } from "preact";
import { Head } from "$fresh/runtime.ts";

export type Props = {
  children: ComponentChildren;
};

export const Container = ({ children }: Props) => {
  return (
    <>
      <div style={{ minHeight: "100vh" }}>
      <Head>
      <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous" />
      <link href="global.css" rel="stylesheet" />
    </Head>
        {children}
      </div>
    </>
  );
};

Let’s use the Container layout component in your route file.

import { Head } from "$fresh/runtime.ts";
import Counter from "../islands/Counter.tsx";
import {Container} from "../components/layouts/container.tsx";

export default function Home() {
  return (
    <Container>
      <Head>
        <title>Fresh App</title>
      </Head>
      <div>
        <img
          src="/logo.svg"
          width="128"
          height="128"
          alt="the fresh logo: a sliced lemon dripping with juice"
        />
        <p>
          Welcome to `fresh`. Try updating this message in the ./routes/index.tsx
          file, and refresh.
        </p>
        <Counter start={3} />
      </div>
    </Container>
  );
}

If you start your fresh server and visit the above route you can see injected CSS files in the head selection of the page.

Related tutoirals