CSS Imports

このコンテンツはまだ日本語訳がありません。

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