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

Question

I am trying to integrate React Grid Layout in my Next.js application. As part of the installation process, they have said, include the following stylesheet in my application:

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

How do I go about doing this?

Answer 1

I haven't used this library myself, but normally to import css you would just import the file at the top of the module where you want to use it, and then you don't have to do anything else with it.

Assuming your App file is directly under src , if I was you I'd try importing those files at the top of App with:

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

Answer 2

Well, actually they are not CSS modules and they are common CSS files, so you can simply import them into your root file (App.js or index.js) with ECMAscript module like this:

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

Answer 3

While @SMAKSS's answer is correct, I want to point out that there will be a new update from Next.js to support importing CSS from 3rd party libraries. It is still on the canary branch at the time of this post is submitted.

Example

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