NextJS Babel에서 SWC로 이사가기 2

( 이 글은 next@12.1.6, antd@4.20.5를 기반으로 작성되었습니다. )

 

이전 글에 이어 Babel에서 SWC로 넘어갈 수 없었던 가장 큰 이유를 해결한 방법에 대해 써보겠다.

1편에 썼던 내용 중 styled-components에 대한 swc지원은 가장 빠른 수준으로 작성되었기에 해당 부분에 대해서는 큰 문제가 없었다.

 

하지만 가장 큰 문제는 내가 즐겨 사용하는 antd의 customize theme를 이용하지 못하는 문제였다.

해당 기능을 NextJS에서 이용하기 위해서는 next-plugin-antd-less라는 플러그인을 사용해야 한다.

이곳에서 문제가 발생했기에 여러 시행착오를 겪어야 했다.

1. antd의 Dynamic Theme (Experimental)을 활용하기

이 방법은 첫 시작부터 좋았다.

제거하는데 가장 큰 걸림돌이었던 babel-plugin-import를 처음부터 제거하라고 설명되어 있었기 때문이었다.

 

하지만 역시나 쉽게 되지 않는 것인지 이 방법을 사용할 경우 custom 할 수 있는 theme의 개수가 무척 적었기에 빠르게 포기해야만 했다.

2.  Modularize Imports 적용하기

1편에서 사용한 이 방법은 사실 antd의 babel을 제거하기 위해 가장 먼저 시도한 방법이었다.

하지만 이 역시 바로 좌절할 수밖에 없었다.

 

next-plugin-antd-less 라이브러리를 사용할 경우 babel-plugin-import를 사용해 antd를 lib를 통해 import 하게 설정을 변경해 주어야 했고 lib로 경로를 변경하는 것은 간단하게 성공했다.

["import", { "libraryName": "antd", "libraryDirectory": "lib", "style": true }, "ant"]

하지만 "style": true 이 부분이 문제였다.

빌드할 때 이 부분의 유무로 불러오려는 Component와 style을 별도로 불러오는 부분이었고 스타일을 별도로 불러오지 못할 경우 less를 읽지 못하는 문제가 발생했다.

3. 가장 간단한 방법으로 돌아가기

그 뒤로 전 에도 next-plugin-antd-less 라이브러리를 수정했던 적이 있는 경험을 바탕으로 라이브러리를 수정하는 방법을 떠올렸지만, 실패했다.

 

그때 가장 간단한 방법을 생각해 낼 수 있었다.

Less파일을 CSS파일로 Convert 하자!

 

이 방법을 가장 먼저 떠올리지 못한 게 어이없을 정도로 너무 간단한 해결책이었다.

방법을 떠올린 뒤 해결법은 무척 간단했다.

 

1. 지긋지긋한 .babelrc파일을 제거한다.

2. next.config.js의 next-plugin-antd-less를 제거한다.

3. npm i -D less를 이용해 less를 설치한다.

4. package.json에 아래처럼 스크립트를 추가한다.

"scripts": {
  ...
  "lessc": "lessc --js ./styles/antd.less ./styles/antd.css",
  ...
}

5. 변경하려는 less파일을 열고 import의 경로를 변경한다.

@import '../node_modules/antd/dist/antd.variable.less'; // before @import '~antd/dist/antd.less';

6. 터미널에서 npm run lessc를 실행한다.

7. less파일의 내용을 기반으로 css파일이 생성된다.

 

내 경우 프로젝트를 시작하기 전 미리 테마 값을 정해두는 편이라 아래와 같이 prepare에서 한 번 실행되도록 해두었다.

"scripts": {
  ...
  "lessc": "lessc --js ./styles/antd.less ./styles/antd.css",
  "prepare": "npm run lessc",
  ...
}

더 좋은 방법이 있을 수 있겠지만 지금은 일단 이 방법을 통해 swc의 빠른 속도를 즐기고 있다.