[Next.js] css 파일 import

프로젝트 폴더 구조를 아래와 같이 만들고 난 후, _app.tsx에 css 파일 2개를 import 하였으나 제대로 스타일이 적용되지 않았다.

public 						
├── images
└── fonts

src
├── pages
└── styles
	├── globals.css
	└── layout.css

Next.js 에서는 _app.tsx에서만 css 파일을 import 할 수 있게 하는 것까지는 알고 있었지만

css 파일 역시 global.css 하나만 import 하도록 막는지는 몰랐기 때문에 이런 참사가 벌어졌다...

 

 globals.css 에서 다른 css 파일을 import 선언하는 꼼수로 해결

/* _app.tsx */
import '../styles/globals.css'
import type { AppProps } from 'next/app'

export default function App({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

 

/* globals.css */
@import './layout.css';

.test-bg-image {
  background-image: url('/images/test.png');
}