如何从 Next.js 中的 css 模块导入样式表？

Question

我正在尝试将React Grid Layout集成到我的 Next.js 应用程序中。 他们说，作为安装过程的一部分，在我的应用程序中包含以下样式表：

/node_modules/react-grid-layout/css/styles.css
/node_modules/react-resizable/css/styles.css

我该怎么做？

Answer 1

我自己没有使用过这个库，但通常要导入 css，您只需在要使用它的模块顶部导入文件，然后您就不必对它做任何其他事情。

假设您的App文件直接位于src下，如果我是您，我会尝试在App顶部导入这些文件：

import '../node_modules/react-grid-layout/css/styles.css'
import '../node_modules/react-resizable/css/styles.css'

Answer 2

好吧，实际上它们不是 CSS 模块，它们是常见的 CSS 文件，因此您可以使用 ECMAscript 模块将它们简单地导入到您的根文件（App.js 或 index.js）中，如下所示：

import '../node_modules/react-grid-layout/css/styles.css';
import '../node_modules/react-resizable/css/styles.css';

Answer 3

虽然@SMAKSS 的回答是正确的，但我想指出 Next.js 会有一个新的更新来支持从 3rd 方库导入 CSS。 在提交这篇文章时，它仍然在金丝雀分支上。

例子

// components/MySlider.tsx
import { Slider } from "@reach/slider";
import "@reach/slider/styles.css";

function Example() {
  return <Slider min={0} max={200} step={10} />;
}

https://github.com/vercel/next.js/pull/16993