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

2022-01-17 22:55

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>
    );
}

댓글 0개

좋아요 1개

아직 작성된 댓글이 없어요.