如何从 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 文件，因此您只需将它们导入根文件 （App.js 或index.js) ECMAscript 模块如下：

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

Answer 3

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

例子

// 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

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

How to import stylesheet from css modules in Next.js?

css

stylesheet

reactjs

next.js