Next.js를 사용하면 JavaScript 파일에서 CSS 파일을 가져올 수 있습니다.
이것은 Next.js가 import 개념을 JavaScript 이상으로 확장하기 때문에 가능합니다.
Adding a Global Stylesheet
/_app.js
페이지 내에서 CSS 파일을 import 해야 합니다.import '../styles.css';
// This default export is required in a new `pages/_app.js` file.
export default function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />}
Adding Component-Level CSS
Next.js는 (name).module.css 파일 명명 규칙을 사용하여 CSS Module을 지원합니다.
스타일을 적용하고자 하는 태그의 className={styles.nav}
의 형식으로 작성해 주어야 한다.
{styles.nav} 는 문자열이다.
실제 class 이름은 styled-components 처럼 class 이름 충돌이 안되게 랜덤하게 바뀐다.
여기서 조건에 따른 className이 바뀔때 복수개의 className이 할당이 된다면 className에 문자열로 선언되야 한다.
→ *<a className={
${styles.nav} ${styles.about}}>index</a>*
import styles from './Button.module.css'
export function Button() {
return (
<button type="button" className={styles.btn} >
Destroy
</button>
)
}
Sass Support