CSSバンドル

このドキュメントは、Classic Remix Compilerを使用している場合にのみ関連します。Remix Viteを使用している場合は、代わりにViteのCSSドキュメントを参照する必要があります。

Remixの一部のCSS機能では、スタイルを単一のファイルにバンドルし、アプリケーションに手動でロードします。これには以下が含まれます。

• CSS副作用インポート
• CSSモジュール
• Vanilla Extract

通常のスタイルシートインポートは、個別のファイルとして残ることに注意してください。

使用方法

Remixは、ページ上のlinkタグを制御できるように、CSSバンドルをページに自動的に挿入しません。

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ツリーシェイキングに関する問題のため、export *の使用は避けてください。