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 tree shaking 問題，請避免使用 export *。