vscode 에서 nextjs + scss 에 Go to Definiton 안되는 문제 해결하기

styles.classname 을 컨트롤 클릭(go to Deifinition)하면 해당 클래스로 이동해야 하는데, Intellij 에서는 잘 되는게 vscode에서는 안된다. 

 

예를들어 이런코드가 있다고 하자 

import React from "react";
import { useRouter } from "next/router";
import { Desktop, Mobile } from "@/components/common/MediaQuery";
import styles from "@/styles/input.module.scss";

const HomeButton = () => {
  const router = useRouter();

  return (
    <>
      <Desktop>
        <div
          className={styles.menu_top_desktop}
          onClick={() => router.push("/")}
        >
          홈으로
        </div>
      </Desktop>
      <Mobile>
        <div className={styles.menu_top} onClick={() => router.push("/")}>
          홈으로
        </div>
      </Mobile>
    </>
  );
};

export default HomeButton;

 

여기서 styles.menu_top_desktop 클래스를 클릭하면 global.d.ts 파일로만 이동한다.

 

이유를 찾아보니 vscode와 intellij 의 scss 모듈 타입 추론 방식이 다르기 때문에 발생하는 것이라고 한다. 이 문제를 해결하기 위해서는 아래 3가지를 하면 된다(아래중 1개라도 빼먹으면 안된다)

 

 

1. TypeScript 설정 추가: tsconfig.json 파일에 다음을 추가한다

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

 

 

2. VSCode의 settings.json에 다음 설정을 추가한다.

{
  "typescript.tsserver.pluginPaths": ["typescript-plugin-css-modules"]
}

 

 

3. SCSS IntelliSense 확장프로그램을 설치

 

 

 

이 3가지를 하면 이후부터는 Go to Definiton 문제가 해결되고 추적이 잘된다.

 

 

끝.