CSS 捆绑

此文档仅在使用经典 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 *。