modules.css에서 var(--) CSS 변수 인식 못함(feat.CSS Variable Autocomplete)

현재 작업 중인 프로젝트에서는 Next14와 module css를 조합하여 쓰고 있다. Next는 tailwind와 잘 맞다고 하기에 중간에 마이그레이션하려 했는데 생각보다 진척이 늦어져서, 일단 기능 구현을 우선으로 두고 있다.

 

다만 CSS 변수의 자동 완성이 되지 않는 문제가 가장 해결이 시급해졌다.

 

📍문제는 무엇?

가령 CSS 변수들을 styles 폴더 내부 foundations 폴더에 하단과 같이 css 파일로 저장했다고 치자.

/*colors.css*/
:root {
  --transparent: transparent;
  --current: currentColor;
  --inherit: inherit;

  --c-white: #ffffff;
  --c-gray-300: #d7dce5;
  --c-black: #000000;
  --c-darkBlack: #292929;
  --c-black-200: #0d0e10; }

해당 파일은 globals.css에서 import 하고 있으며 최종적으로 app 폴더 내 layout.tsx에서 global 파일을 불러 와 전체에 적용 되도록 처리하고 있다. 그런데 module.css 파일에서 var()를 사용하여 CSS 변수를 불러오려고 하면, var만 입력하는 자동 완성으로는 변수 리스트가 나타나지 않아 직접 colors.css 파일을 열어 일일이 변수를 대조하고 확인해야 하는 불편함이 있었다. 초반에는 괜찮았는데 퍼블리싱 작업을 빠르게 쳐낼 때는 번거로운 일이라, 변수 인식 문제를 먼저 해결해야 하는 상황이 되었다.

 

tailwind를 쓰면 이 문제도 해결되지 않을까 싶어 기타 다른 요소들까지 고려하면서 마이그레이션을 하려 했는데, 일정상 후에 적용하기로 해서 당분간은 module.css를 계속 쓸 것 같았다.

따라서 급한대로 해당 문제만이라도 해결할 방법을 찾기 시작했다.

 

 

💡VS Code 확장 프로그램 CSS Variable Autocomplete

사실 유사한 이름인 CSS Variables Autocomplete를 먼저 적용해 보았는데 setting.json에서 설정을 인식하지 못하는 문제가 발생하여 대안적으로 다른 확장 프로그램을 찾아 보았다.

우선 해당 확장 프로그램을 설치해준다. 설치 수를 보면 많은 사람들이 이용하고 있는 것을 볼 수 있다.

이후 VS Code의 setting.json을 열어 아래와 같이 css로 끝나는 파일들에서 변수를 읽으라는 코드를 추가한다. 확장 프로그램의 적용 방법은 설치 뒤 하단에 나오는 이미지로도 짧고 친절하게 알려주니 읽어볼 것을 권한다.

"cssVariables.lookupFiles": ["**/*.css"]

 

우리 프로젝트에서는 변수를 css 파일에 저장하고 있기 때문에 css만 추가했지만,

공식에서 제공하는 설정을 보면 아래처럼 scss나 기타 파일도 등록이 가능한 것 같다.

{
  "cssVariables.lookupFiles": [
    "**/*.css",
    "**/*.scss",
    "**/*.sass",
    "**/*.less",
    "node_modules/open-props/open-props.min.css"
  ]
}

 

 

 

💡적용 결과

module.css에서 var만 입력했을 뿐인데 찾고자 하는 모든 변수들이 나오는 것을 볼 수 있다. 

앞으로 파일에서 CSS 변수를 일일이 찾는 행위는 이제 그만! 

현명한 확장 프로그램 사용으로 일거리 줄이기