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을 확인할 수 있었다.

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',
	   ],
	  },
    }

Summary

가장 좋은 방법은 역시 sass를 업데이트하고 변경점을 적용해 연결 및 워닝 메시지를 없애는 쪽이겠으나, 프로젝트에는 언제나 기한과 적용 범위가 있다. 그 기한 내에 고민한 흔적이므로 남겨둔다.