개요

---

Next js에서는 sass/scss를 사용하기 위해서는 세팅을 해야했다.

방법

---

우선 아래 명령어를 실행해 설치해주자.

npm install -D sass

Next js는 sass, scss 역시 내재된 방식(CSSModule)으로 지원하기에 패키지 하나 받으면 이후에는 [name].module.scss 형식을 사용할 수 있다.

CSSModule 방식은 같은 클래스명이라도 특정 컴포넌트에만 영향을 주는 방법이다.
파일명, 클래스명, 해시값을 이용해 고유한 클래스명을 자동으로 만들어내기 때문에 다른 파일에 존재하는 클래스명과 충돌을 걱정할 필요가 없음.
빌드 타임에 이러한 CSS 모듈 파일들은 자동으로 여러 개의 축약된 CSS 파일들로 번들링 된다. 여러 개인 이유는 Next.js(정확히는 Webpack)의 코드 분할에 의해 각 페이지에서 필요한 CSS 파일들이 분리되기 때문이다.

컴포넌트에 스타일 적용하기 위해 Button.tsx 컴포넌트에 적용해보자.

// Button/Button.module.scss
.button_red {
  background-color: red;
}

.button_green {
  background-color: green;
  border: 1px solid black;
}

// Button/Button.tsx
import styles from "./Button.module.scss";

function Button() {
  return <button className={styles.buttonRed}>버튼입니다.</button>;
}

export default Button;

작성하다 보면 자동완성이 잘 안되는 것을 알 수 있다.
(className에 styles을 타이핑하고 .을 입력해보면 알 수 있음)

자동완성은 개발할 때 너무너무너무너무 편하기에 설정해주자.

아래의 플러그인을 설치하자.

npm install -D typescript-plugin-css-modules

tsconfig.json에 추가해주자.

// tsconfig.json
{
  "compilerOptions": {
    "plugins": [{ "name": "typescript-plugin-css-modules" }]
  }
}

그리고 Visual Studio Code에서 사용할 때는 해당 플러그인을 사용하기 위해서 .vscode/settings.json을 만들어서 로컬환경을 설정해주면 된다.

// .vscode/settings.json
{
  "typescript.tsdk": "node_modules/typescript/lib",
  "typescript.enablePromptUseWorkspaceTsdk": true
}

저장하게 되면 어떤 팝업이 나오는데, 허용해주면 자동완성이 된다. 팝업이 나오지 않았다면 vscode를 다시 껐다가 적용해보길.. (그래도 안된다면… 흐음..🤔)

아래처럼 자동완성이 잘된다!

import 했을 때 자동 완성으로 scss파일이 나오는 방법은 찾아보는 중…🔍
VSCode Does Not Auto Complete SCSS Module Imports · Discussion #13575 · vercel/next.js
위 링크를 찾아보니 아직 nextjs 에서나 vscode에서 지원을 해주진 않는 것 같다.

…

조금 더 검색을 해보니 방법을 찾았다!

vscode의 Extension(확장) 탭으로 들어가서 Path Intellisense 설치한다.

그리고 .vscode의 settings.json 에서 아래 두 줄을 추가해준다.

// .vscode/settings.json
{
  "javascript.suggest.paths": false,
  "typescript.suggest.paths": false
}

그렇게 하면 자동완성이 아래처럼 잘 나온다.

선택사항

나는 해당 컴포넌트 레벨에서 scss 파일을 같이 만들어서 작업한다. 그러나 styles 폴더와 같은 공간에 모아두고 싶은 경우도 생길 수 있어서 기록해본다.

next.config.js라는 파일 안에 sass compiler를 설정해주면 된다.

const path = require("path");

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  sassOptions: {
    includePaths: [path.join(__dirname, "styles")],
  },
};

module.exports = nextConfig;

참고

---

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

NextJS에서 React 컴포넌트 스타일링하기 (NextJS React 프로젝트 04)