CSS imports per route in Remix

Introduction

Loading CSS only for the page you visit helps your website load faster and keeps styles organized.

When you want each page to have its own unique look without loading all styles at once.

When your website has many pages and you want to keep CSS files small and fast.

When you want to avoid style conflicts by isolating CSS to specific routes.

When you want to improve user experience by reducing initial load time.

When you want to maintain clean and manageable CSS code per page.

Syntax

Remix

export function links() {
  return [{ rel: 'stylesheet', href: '/styles/route-style.css' }];
}

The links function is exported from a route file in Remix.

It returns an array of objects telling Remix which CSS files to load for that route.

Examples

This loads home.css only on the home page route.

Remix

export function links() {
  return [{ rel: 'stylesheet', href: '/styles/home.css' }];
}

This loads two CSS files on the about page: one specific and one shared.

Remix

export function links() {
  return [
    { rel: 'stylesheet', href: '/styles/about.css' },
    { rel: 'stylesheet', href: '/styles/shared.css' }
  ];
}

This route loads no CSS files.

Remix

export function links() {
  return [];
}

Sample Program

This Remix route loads dashboard.css only when the Dashboard page is visited. The styles inside dashboard.css will apply only to this page, helping keep the CSS focused and the page fast.

Remix

import { LinksFunction } from '@remix-run/node';

export const links: LinksFunction = () => {
  return [{ rel: 'stylesheet', href: '/styles/dashboard.css' }];
};

export default function Dashboard() {
  return (
    <main>
      <h1>Dashboard</h1>
      <p>Welcome to your dashboard.</p>
    </main>
  );
}

Important Notes

Make sure the CSS file path in href is correct and accessible.

Each route can have its own links function to load different CSS files.

Using this method improves performance by loading only needed styles.

Summary

Use the links function in Remix routes to load CSS per page.

This keeps styles organized and improves page load speed.

Each route can load one or more CSS files as needed.