nextjs - 오래된 sass 연결하기

Problem - 이전 버전 Sass(2.x)를 지금 Nextjs(16.x)에 연결해야 한다.

현재 진행하는 프로젝트는 오래된 CRA 기반 react 프로젝트를 최신의 nextjs로 마이그레이션 해야 했다.

실제로 에러가 나지는 않았지만, 서버 사이드 콘솔에서 수많은 Deprecation warning이 나오는 것을 확인할 수 있었다.

Goal - Deprecation warning을 조용하게 만들자.

업데이트를 생각하는 것 대신 CSS를 변경하지 않고 그대로 가는 것으로 결정되었으므로 개발을 방해하지 않도록 warning만 나오지 않도록 하게 되었다.

Implementation

1. Typescript 관련 이슈

import '@/assets/scss/components/_button.scss'; // type declaration error
import '@/assets/scss/common/common.module.scss'; // 문제 없음. react-dom 내부의 type으로 연결

...

위 스니펫에서 볼 수 있는 대로 *.module.scss 형태로 사용한다면 에러가 나지 않는다. 하지만 기존 레거시 sass 형태처럼 사용한다면? react-dom 내부의 type 파일에 해당 부분이 삭제된 것으로 보여 타입 자체를 찾을 수 없다!

// @/types/sass.d.ts 
declare module '*.scss' {
  const content: { [className: string]: string };
  export default content;
}

이 경우 가장 간단한 방법은 직접 d.ts를 만들어 scss의 기본 타입을 설정해주는 것이었다.

이 외에 몇 가지 타입을 수정한 이후에 수많은 sasswarning을 확인할 수 있었다.

hack 완벽한 방법은 아니라고 생각한다. 만약 sass를 다시 한 번 사용하게 될 순간이 온다면 type을 저쪽으로 연동시키기 보다 scss 파일로 보내는 방법을 찾는게 좋다고 생각한다.

2. Deprecation issues

수많은 deprecation warning을 찾을 수 있었고 sass자체를 건드리지 않고 워닝만 끄도록 하는 해결책은 아래 링크에서 해결할 수 있었다.

official issue

// ./next.config.ts

const nextConfig = {
	...
	sassOptions: {
      includePaths: [path.join(__dirname, 'src')],
      silenceDeprecations: [
		'legacy-js-api',
		'import',
		'color-functions',
		'global-builtin',
		'slash-div',
	   ],
	  },
    }

깔끔하게 값 하나로 워닝을 지우는 것은 실패했지만 해결된 것 만으로 다행이 아닐까?

지금까지의 내용에 깊은 이해가 있다거나 한 것은 아니지만 앞으로 이러한 마이그레이션을 진행하게 된다면 충분히 revisit 할만한 가치가 있는 내용이라고 생각한다.

Summary

지금까지의 내용은 어떻게 보면 임시방편에 불과하다. 여기서는 빠른 개발을 위해서 문제를 덮어두는 방향으로(Typescript와 린터만 만족시키는) 작업이 되었지만, 언젠가 다시 sass를 사용하게 된다면 여기서 좀 더 원칙적으로 접근해야 한다고 생각한다.