跳转到内容

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:

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