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