@/styles/globals.css'

작성한 질문수 9

0

안녕하세요 이루빠님 이정환입니다.

해당 경로에 globals.css 파일이 잘 존재하는데도 불러오기가 잘 안된다면, 아마 타입스크립트 baseUrl 또는 path 설정과 관련된 문제로 보입니다.

정확한 원인 파악을 위해서는 질문 가이드라인에 남겨드린대로 전체 프로젝트 코드를 깃허브 링크 형태로 전달해 주셔야 합니다. 링크 형태로 답글 남겨주시면 직접 살펴보고 회신드리겠습니다.

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 링크 방법과 관련된 문제를 해결하는 과정을 다룹니다.

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

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