[Next.js13] scss 설정

npm install -D sass

 

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

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

 

타입스크립트 style 자동완성 플러그인 설치

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
}

 

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;