CSS 副作用インポート

Remix Vite を使用している場合、このドキュメントはもはや関連性がありません。CSS 副作用インポートは Vite でそのまま動作します。

一部の NPM パッケージは、プレーンな CSS ファイルの副作用インポート（例：import "./styles.css"）を使用して、JavaScript ファイルの CSS 依存関係を宣言します。これらのパッケージのいずれかを使用する場合は、まずアプリケーションで CSS バンドルを設定していることを確認してください。

たとえば、モジュールには次のようなソースコードがある場合があります。

import "./menu-button.css";
 
export function MenuButton() {
  return <button data-menu-button>{/* ... */}</button>;
}

JavaScript ランタイムはこの方法での CSS のインポートをサポートしていないため、関連するパッケージを remix.config.js ファイルの serverDependenciesToBundle オプションに追加する必要があります。これにより、サーバーで実行する前に、CSS インポートがコードからコンパイルされるようになります。たとえば、React Spectrum を使用するには、次のようにします。

remix.config.js

/** @type {import('@remix-run/dev').AppConfig} */
module.exports = {
  serverDependenciesToBundle: [
    /^@adobe\/react-spectrum/,
    /^@react-spectrum/,
    /^@spectrum-icons/,
  ],
  // ...
};