Global CSS cannot be imported from within node_modules 대응 방법(Next.js)

error의 원인

Next.js node이것은 모듈 파일이 css 파일을 가져올 때 발생한 오류입니다.
https://nextjs.org/docs/messages/css-npm
https://github.com/vercel/next.js/blob/main/errors/css-npm.md

해결책

오류 원인의 css 가져오기를 취소해서 해결합니다.
이쪽 포장을 통해서 node.module에서 왔어요.less/.css/.scss/.sass/.styl의 가져오기를 취소할 수 있습니다.
https://www.npmjs.com/package/next-remove-imports
포장을 사용하면 가져와야 할 css가 적응이 안 될 수 있으니 직접 가져오세요.

매크로 패키지의 설치

cmd

npm install next-remove-imports
# or
yarn add next-remove-imports

가방 사용법

next.config.js에 다음 기술을 추가합니다.
next.config.만약 js가 존재하지 않는다면 프로젝트 바로 아래에 추가하십시오.

// next.config.js
const removeImports = require('next-remove-imports')({
  test: /node_modules([\s\S]*?)\.(tsx|ts|js|mjs|jsx)$/,
  matchImports: "\\.(less|css|scss|sass|styl)$"
})

module.exports = removeImports({
  webpack(config, options) {
    return config
  },
})

css의 적응

여기까지의 목적 node모듈을 사용할 수 있지만 css가 적응이 안 돼요.css 다시 가져오세요.다음은 공식의 예이다.
Import styles from node_modules
For importing CSS required by a third party component, you can do so in your component. For example:

// components/ExampleDialog.js
import { useState } from 'react'
import { Dialog } from '@reach/dialog'
import VisuallyHidden from '@reach/visually-hidden'
import '@reach/dialog/styles.css'

function ExampleDialog(props) {
  const [showDialog, setShowDialog] = useState(false)
  const open = () => setShowDialog(true)
  const close = () => setShowDialog(false)

  return (
    <div>
      <button onClick={open}>Open Dialog</button>
      <Dialog isOpen={showDialog} onDismiss={close}>
        <button className="close-button" onClick={close}>
          <VisuallyHidden>Close</VisuallyHidden>
          <span aria-hidden>×</span>
        </button>
        <p>Hello there. I am a dialog</p>
      </Dialog>
    </div>
  )
}

https://nextjs.org/docs/basic-features/built-in-css-support