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/,
  ],
  // ...
};