CSS 打包

本文档仅在使用 Classic Remix 编译器时才相关。如果您使用的是 Remix Vite，则应参考 Vite 的 CSS 文档。

Remix 中的某些 CSS 功能将样式捆绑到单个文件中，然后您可以手动加载到应用程序中，其中包括：

请注意，任何常规样式表导入都将保留为单独的文件。

用法

Remix 不会自动将 CSS 包插入页面，因此您可以控制页面上的链接标签。

要访问 CSS 包，首先安装 @remix-run/css-bundle 包。

npm install @remix-run/css-bundle

然后，导入 cssBundleHref 并将其添加到链接描述符 - 最有可能在 app/root.tsx 中，以便它适用于整个应用程序。

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 }]
    : []),
  // ...
];

将此链接标签插入页面后，您现在就可以开始使用 Remix 内置的各种 CSS 捆绑功能了。

限制

由于 esbuild 的 CSS 树摇动问题，请避免使用 export *。