Next.js with module sass

1. Next.js 소개
2. Next.js with Typescript
3. Next.js with module sass (현재)

제가 가장 선호하는 css는 module sass 방식입니다. 고전적인 css 방식에 익숙하신 분들은 어색한 개념일 수 있는데요. 차근차근 설명해보도록 하겠습니다.

CSS가 DOM의 형태를 관리하고 JS가 DOM의 이벤트를 관리한다는 점은 다들 잘 아실겁니다. 둘은 아주 잘 분리되어있죠. 문제는 너무 잘 분리되어 있어서 이벤트를 통해 DOM의 형태를 변경하고 싶을 때는 문제가 되고 때로는 그거때문에 버그가 생기기도 한다는 것입니다.

프로덕션의 흔한 css 코드. 출처는 https://medium.freecodecamp.org/how-to-write-truly-terrible-css-214c26c6f729

css의 이런 문제를 해결하기 위해 postprocessing의 개념이 도입되었고 sass, less 등의 탬플릿 언어가 개발되었습니다. 이는 훌륭하게 css의 단점을 매꾸었고 js와 css의 분리도 엄격히 지키고 있습니다.

그러나 아쉬움은 있습니다. 어차피 원자화된 각 컴포넌트와 긴밀하게 결합하는 css의 특성을 생각하면, 아예 css와 컴포넌트를 모듈화해서 관리할 수는 없을까?

여기서 탄생한 방법이 바로 module sass 방식입니다.

import style from './style.module.scss';
const Index = () => <h1 className={style.red}>타입스크립트와 함께하는 Next.js</h1>;
export default Index;

어때요? 눈이 번쩍 뜨이지 않나요? 각 컴포넌트와 스타일을 긴밀하게 결합하는 방식입니다.

이 방식의 장점과 단점은 이렇습니다.

• 모듈화되어 다른 컴포넌트에 영향을 주지 않는다.
  css가 다른 컴포넌트에 영향을 줄까봐 BEM을 쓰고 최상단에 div#id를 줘서 cascade하고 했던 경험이 많으실 겁니다. 더 이상 그런 걱정하지 마세요! 이젠 그냥 쓰시면 됩니다!

물론 단점도 명확하죠

• 복수 클래스 선언이 번거로워진다.
• 전역 클래스의 사용법이 직관적이지 않다.

치명적인 단점입니다. 하지만 익숙해지면 의외로 손쉬우니까요. 저와 함께 써보면서 익숙해지도록 하죠!

먼저 라이브러리를 추가해줍니다.

yarn add next-compose-plugins @zeit/next-sass node-sass --dev

next.config.js를 수정해줍니다.

const withPlugins = require('next-compose-plugins');
const withSass = require('@zeit/next-sass');
const withTypescript = require('@zeit/next-typescript');
module.exports = withPlugins([
[
withSass,
{
cssModules: true,
cssLoaderOptions: {
importLoaders: 1,
localIdentName: '[local]___[hash:base64:5]'
}
}
],
[withTypescript]
]);

declaration.d.ts를 만들어줍니다

touch declaration.d.ts

내용물을 채웁시다

// declaration.d.ts
declare module '*.scss' {
const content: { [className: string]: string };
export default content;
}

출처: https://stackoverflow.com/questions/40382842/cant-import-css-scss-modules-typescript-says-cannot-find-module

tsconfig.json도 만들어줍시다

{
"compilerOptions": {
"module": "esnext",
"target": "esnext",
"jsx": "preserve",
"sourceMap": false,
"moduleResolution": "node"
},
"exclude": [".next"]
}

출처: https://github.com/deptno/next.js-typescript-starter-kit/blob/master/tsconfig.json

마지막으로 /pages/style.module.scss 를 만들어주고…

.red {
color: red;
}

위에처럼 index.tsx를 바꿔주면…

import style from './style.module.scss';
const Index = () => <h1 className={style.red}>타입스크립트와 함께하는 Next.js</h1>;
export default Index;

짜잔. 본문의 글씨가 빨간색으로 변한 것을 확인할 수 있습니다!