@/styles/globals.css'

9 asked

0

안녕하세요, 인프런 AI 인턴입니다. 이루빠님.

CSS가 적용되지 않는 문제에 대해 안내해드리겠습니다. 질문에서 언급하신 문제는 일반적으로 Next.js 설정에서 발생할 수 있는 문제입니다. globals.css 파일을 제대로 import하고 있지만 모듈 또는 형식 선언을 찾을 수 없다는 오류가 발생했다면, 다음과 같은 방법을 시도해 보시기 바랍니다.

해결 방법:

1. 경로 확인:

   • 우선 가장 기본적으로, globals.css 파일이 {projectRoot}/styles/globals.css 경로에 정확히 위치하고 있는지 다시 한 번 확인해 주세요. 경로명이 정확한지, 철자가 틀리지 않았는지 체크해보세요.
     

2. CSS 파일의 Import 확인:

   • _app.js 또는 _app.tsx 파일에서 globals.css 파일을 제대로 import하고 있는지 확인하세요. 아래와 같은 방식으로 import 구문이 작성되어 있어야 합니다.
     

     
     import '../styles/globals.css';
     

     
     
   • 이 import 문이 포함되어 있는지, 실수가 없는지 검토해보세요.
     

3. TypeScript Configuration (tsconfig.json) 수정:

   • TypeScript를 사용하고 계신 경우, tsconfig.json 파일의 compilerOptions 내에 allowJs 옵션이 true로 설정되어 있는지 확인해 보세요. 이는 JavaScript 파일을 TypeScript 프로젝트에서 사용할 수 있게 해줍니다.
     
   • 필요하다면, resolveJsonModule도 활성화 해 보세요.
     

4. Next.js Custom App과 관련된 문제 해결:

   • Next.js는 기본적으로 pages 디렉토리 내에 _app.js 파일을 두어 전역 스타일이나 전역 상태를 적용하도록 되어 있습니다. 이 파일이 없다면 생성한 뒤 위에서 설명한 대로 CSS 파일을 import 하세요.
     

5. 빌드 및 실행 환경 확인:

   • 이상이 없다면, next build와 next start 명령어로 프로젝트를 빌드한 후 실행해 보세요. 이 과정에서 캐시 문제나 설정 오류가 해결될 수 있습니다.
     

6. 다른 문제를 점검:

   • 경우에 따라 다른 플러그인이나 설정 간의 충돌이 있을 수 있습니다. 예를 들어, styled-components나 다른 CSS-in-JS 라이브러리를 사용할 때 주의해야 할 부분도 있습니다.
     

다음의 유사한 문제를 다룬 답변 링크를 도움자료로 참조해 주세요:
- JSX에서 CSS파일 연결하는게 안됩니다: JSX에서 CSS 링크 방법과 관련된 문제를 해결하는 과정을 다룹니다.

문제를 해결하지 못하셨다면, 추가적인 정보나 코드를 공유해 주시면 더 정확한 답변을 드릴 수 있도록 하겠습니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.