[Next.js] 핵심 개념 익히기 - ③ CSS/Sass 스타일링

Next.js 공식 문서를 읽고, 필자가 생각하기에 Next.js에 대해 알고 있어야 하는 핵심 개념을 정리한 포스팅입니다. 실제로 Next.js 공식 문서를 살펴보면 생각보다 많은 내용이 있는데, 필자의 목적은 "Next.js가 무엇이냐"라는 질문에 대해 답을 할 수 있는 수준의 핵심 개념을 간추리는 것입니다. 더 자세한 내용은 개발하면서 그때그때 살펴보면 된다고 생각합니다.

 

Next.js에서는 JavaScript에서 CSS/Sass 파일을 import 할 수 있다. 이는 Next.js가 JavaScript에서의 import 문법을 확장했기 때문에 가능한 일이다. (아마도 Next.js가 Webpack의 동작 방식을 커스터마이징 한 것이 아닐까 추측한다.)

 

1. CSS

전역적으로 영향을 미치는 CSS 파일은 pages/_app.js 파일에서만 import 할 수 있다. 빌드 타임에 이러한 CSS 파일들은 자동으로 하나의 축약된 CSS 파일로 번들링 된다.

import '../styles.css';

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

예외적으로, node_modules로부터의 CSS 파일은 어디에서든 import 할 수 있다.

 

2. Sass

Next.js에서는 CSS 파일과 마찬가지로 Sass 파일(.scss, .sass)도 사용할 수 있다. 이는 CSS 파일과 확장자만 다를 뿐 나머진 동일하다. Sass 파일을 import 하려면 먼저 sass 패키지를 설치해야 한다.

npm install sass

Sass 컴파일러 옵션을 커스터마이징 하고 싶다면 next.config.js 파일의 sassOptions를 수정하면 된다.

const path = require('path');

module.exports = {
    sassOptions: {
        includePaths: [path.join(__dirname, 'styles')]
    }
};

 

3. CSS/Sass Module

CSS/Sass 모듈 파일(.module.css, .module.scss, .module.sass)은 어디에서든 import 할 수 있다. 이는 파일명, 클래스명, 해시값을 이용하여 고유한 클래스명을 자동으로 만들어내기 때문에 다른 파일에 존재하는 클래스명과의 충돌을 걱정할 필요가 없다.

 

빌드 타임에 이러한 CSS/Sass 모듈 파일들은 자동으로 여러 개의 축약된 CSS 파일들로 번들링 된다. 여러 개인 이유는 Next.js(정확히는 Webpack)의 코드 분할에 의해 각 페이지에서 필요한 CSS 파일들이 분리되기 때문이다.

import styles from './Button.module.css';

export function Button() {
    return (
        <button type="button" className={styles.green}>
            Destroy
        </button>
    );
}

참고로 Sass 모듈 파일의 경우, 다음과 같이 Sass 변수를 JavaScript 파일에서 불러와 사용할 수 있도록 지원한다.

// variables.module.scss

$primary-color: #64FF00;

:export {
    primaryColor: $primary-color;
}

// pages/_app.js

import variables from '../styles/variables.module.scss';

export default function MyApp({ Component, pageProps }) {
    return (
        <Layout color={variables.primaryColor}>
            <Component {...pageProps} />
        </Layout>
    );
}