CSS 打包

此文档仅在使用经典 Remix 编译器时相关。如果您正在使用 Remix Vite，您应该参考 Vite 的 CSS 文档。

Remix 中的一些 CSS 功能会将样式打包到一个单独的文件中，您需要手动将其加载到应用程序中，包括

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

用法

Remix 不会自动将 CSS 包插入到页面中，以便您可以控制页面上的 link 标签。

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

npm install @remix-run/css-bundle

然后，导入 cssBundleHref 并将其添加到 link 描述符中——最有可能在 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 }]
    : []),
  // ...
];

将此 link 标签插入到页面后，您就可以开始使用 Remix 中内置的各种 CSS 打包功能了。

局限性

由于 esbuild 的 CSS tree shaking 问题，请避免使用 export *。