next-images를 설치한 후 Next.js 앱에서 '전역 CSS를 가져올 수 없습니다' 오류가 발생하는 이유는 무엇입니까?

NPM 설치 후 Next.js 전역 CSS ImportError

next-images 패키지를 설치한 후 React 애플리케이션에서 " 전역 CSS는 사용자 정의 이외의 파일에서 가져올 수 없습니다." 이 문제는 오류 메시지에 표시된 대로 전역 CSS 가져오기를 _app.js로 이동한 후에 발생합니다.

근본 원인:

Next.js 버전 9.2에서는 방법이 변경되었습니다. 전역 CSS가 처리됩니다. 이제 사용자 정의 내에서만 전역 CSS를 가져와야 합니다. 구성 요소.

해결 방법:

이 문제를 해결하려면 다음 단계를 따르세요.

1. 다음을 사용하세요. Node.js CSS 로더:

   • 바꾸기 package.json 파일에 sass가 포함된 @zeit/next-sass.
   • next.config.js에서 CSS 로딩에 대한 수정 사항을 제거하세요.

2. 전역 CSS를 다음으로 이동 _app.js:

   • 오류 메시지에 표시된 대로 페이지/_app.js 파일에서 전역 CSS를 가져옵니다.

3. 특정 CSS 가져오기 모듈:

   • 구성 요소별 또는 페이지별 스타일의 경우 CSS 모듈을 해당 구성 요소 또는 페이지 파일 내에서 가져와 사용합니다.

예(업데이트됨) _app.js):

// pages/_app.js

import '../global-styles/main.scss'

export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

추가 정보:

Next 때문에 CSS 또는 Layout.js를 직접 변경하지 않아도 오류가 발생할 수 있습니다. Node.js 버전 업데이트로 인해 새로운 CSS 처리 요구 사항이 촉발되었을 수 있습니다.

Next.js CSS 로더를 채택하고 전역 가져오기 _app.js의 CSS를 사용하면 Next.js 애플리케이션에서 전역 CSS를 적절하게 처리할 수 있습니다.

위 내용은 next-images를 설치한 후 Next.js 앱에서 '전역 CSS를 가져올 수 없습니다' 오류가 발생하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!