Next.js에서 '사용자 정의 이외의 파일에서 전역 CSS를 가져올 수 없습니다' 오류를 어떻게 해결할 수 있습니까?

Next.js 전역 CSS 가져오기 딜레마

Next.js에서는 전역 CSS를 관리하는 것이 까다로울 수 있습니다. 최근 사용자에게 다음과 같은 난처한 오류가 발생했습니다. "전역 CSS는 사용자 정의 이외의 파일에서 가져올 수 없습니다." 이 오류는 CSS 가져오기를 페이지/_app.js로 재배치해야 함을 나타냅니다.

원인 분석

이 오류는 일반적으로 @와 같은 기존 타사 패키지를 사용할 때 발생합니다. CSS 로딩을 위한 zeit/next-sass. Next.js 9.2가 출시되면서 Custom 내에서 전역 CSS 가져오기가 필수가 되었습니다. 요소. 이 변경 사항은 성능을 향상하고 CSS 처리를 단순화하기 위해 구현되었습니다.

단계별 솔루션

오류를 해결하고 전역 CSS를 효과적으로 관리하려면 다음을 고려하세요. 단계:

1. 내장 CSS 로더로 전환: 다음에서 마이그레이션 sass를 설치하여 내장 Next.js CSS 로더에 @zeit/next-sass를 추가하세요.
2. 사용자 정의 CSS 구성 제거: next.config.js를 삭제하거나 CSS 로딩 구성 수정을 피하세요.
3. 전역 CSS 재배치: 다음과 같이 전역 CSS 가져오기를 페이지/_app.js로 이동합니다. 오류 메시지로 표시됩니다.

글로벌 CSS 가져오기가 포함된 페이지/_app.js의 예:

// pages/_app.js
import '../global-styles/main.scss'

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

범위 지정을 위한 CSS 모듈 사용 스타일링

구성 요소나 페이지에 특정한 스타일을 적용하기 위해 Next.js는 다음을 제공합니다. CSS 모듈에 대한 지원이 내장되어 있습니다. 구성 요소와 동일한 이름의 Sass 파일(예: 버튼.module.scss)을 생성하면 해당 구성 요소에만 적용되는 범위 지정 스타일을 정의할 수 있습니다.

결론

Next.js의 CSS 관리에 대한 최신 접근 방식을 사용하려면 사용자 정의 내에서 전역 스타일을 가져와야 합니다. 요소. 제안된 솔루션을 구현하면 "사용자 정의 이외의 파일에서는 전역 CSS를 가져올 수 없습니다."라는 오류를 방지하는 데 도움이 됩니다. 오류를 방지하고 효과적인 CSS 처리를 보장하세요.

위 내용은 Next.js에서 '사용자 정의 이외의 파일에서 전역 CSS를 가져올 수 없습니다' 오류를 어떻게 해결할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!