Skip to content

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" }}>
      <link href="[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous" />
      <link href="global.css" rel="stylesheet" />

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 (
        <title>Fresh App</title>
          alt="the fresh logo: a sliced lemon dripping with juice"
          Welcome to `fresh`. Try updating this message in the ./routes/index.tsx
          file, and refresh.
        <Counter start={3} />

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

0 0 votes
Article Rating
Notify of

Inline Feedbacks
View all comments