CSS Bundling

This documentation is only relevant when using the Classic Remix Compiler. If you're using Remix Vite, you should refer to Vite's CSS documentation instead.

Some CSS features in Remix bundle styles into a single file that you load manually into the application including:

Note that any regular stylesheet imports will remain as separate files.

Usage

Remix does not insert the CSS bundle into the page automatically so that you have control over the link tags on your page.

To get access to the CSS bundle, first install the @remix-run/css-bundle package.

npm install @remix-run/css-bundle

Then, import cssBundleHref and add it to a link descriptor—most likely in app/root.tsx so that it applies to your entire application.

import { cssBundleHref } from "@remix-run/css-bundle";
import type { LinksFunction } from "@remix-run/node"; // or cloudflare/deno

export const links: LinksFunction = () => [
  ...(cssBundleHref
    ? [{ rel: "stylesheet", href: cssBundleHref }]
    : []),
  // ...
];

With this link tag inserted into the page, you're now ready to start using the various CSS bundling features built into Remix.

Limitations

Avoid using export * due to an issue with esbuild's CSS tree shaking.