Shorts

NextJS 에서 sass 사용하기 위한 세팅

1 minute read
2024-07-22

아래 세팅대로 하면 sass 를 사용하면 cmd + click 도 사용할 수 있어서 생산성에 매우 좋은 것 같다.


설치

npm install --save-dev sass typescript-plugin-css-modules


tsconfig

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


vscode 세팅

프로젝트에서 cmd + click 을 사용하기 위해선 플러그인의 도움을 받아야 한다.


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


.vscode 디렉토리를 프로젝트 최상단에 만들어주고 위 json 파일을 추가해준다.


next-env.d.ts

scss 확장자에 대한 타입 에러를 해결해야한다. svg 와 다른 리소스 에 대한 타입과 같이 해결해주면 된다.


next-env.d.ts
declare module '*.scss' {
  const content: string
  export default content
}