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

【问题标题】：How to import stylesheet from css modules in Next.js?如何从 Next.js 中的 css 模块导入样式表？
【发布时间】：2020-10-04 18:14:42
【问题描述】：

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

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

我该怎么做？

【问题讨论】：

标签： css reactjs next.js stylesheet

【解决方案1】：

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

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

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

【讨论】：

【解决方案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';

【讨论】：

【解决方案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

【讨论】：