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 *
の使用は避けてください。