CSS 副作用导入

¥CSS Side Effect Imports

本文档在使用 Remix Vite 时不再适用。CSS 副作用导入在 Vite 中开箱即用。

一些 NPM 包使用纯 CSS 文件（例如 import "./styles.css"）的副作用导入来声明 JavaScript 文件的 CSS 依赖。如果你想使用其中一个软件包，请首先确保你已在应用中设置了 CSS 打包。

¥Some NPM packages use side effect imports of plain CSS files (e.g. import "./styles.css") to declare the CSS dependencies of JavaScript files. If you want to consume one of these packages, first ensure you've set up CSS bundling in your application.

例如，一个模块可能包含如下源代码：

¥For example, a module may have source code like this:

import "./menu-button.css";

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

由于 JavaScript 运行时不支持以这种方式导入 CSS，因此你需要将任何相关的包添加到 remix.config.js 文件中的 serverDependenciesToBundle 选项中。这确保在服务器上运行代码之前，所有 CSS 导入都已从代码中编译出来。例如，要使用 React Spectrum：

¥Since JavaScript runtimes don't support importing CSS in this way, you'll need to add any relevant packages to the serverDependenciesToBundle option in your remix.config.js file. This ensures that any CSS imports are compiled out of your code before running it on the server. For example, to use React Spectrum:

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