CSS 打包

¥CSS Bundling

本文档仅在使用 Classic Remix 编译器 时适用。如果你使用的是 Remix Vite，请使用 Vite 的 CSS 文档 支持。

Remix 中的一些 CSS 功能会将样式打包成一个文件，供你手动加载到应用中，包括：

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

• CSS 副作用导入

  ¥CSS Side Effect Imports

• CSS 模块

  ¥CSS Modules

• Vanilla Extract

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

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

用法

¥Usage

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

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

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

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

npm install @remix-run/css-bundle

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

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

将此链接标记插入页面后，你现在就可以开始使用 Remix 内置的各种 CSS 打包功能了。

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

局限性

¥Limitations

避免由于 esbuild 的 CSS tree shake 问题 而使用 export *。

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