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

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