antd 테마 커스텀하기 (.less)

less-loader의 jsEnabled가 deprecated 되었다네

공용 패키지에는 antd 테마를 공용으로 커스텀해둔 것이 있고, 필요할 때 웹팩 설정 파일에서 커스텀 테마 파일을 lessToJs로 변환하고, 로더 옵션에 js를 허용하도록 하여 사용하는 것이 기존의 사용법이었다. antd 문서에서 패키지 커스터마이징 방법으로 소개하는 것이다.

새로 시작한 프로젝트 세팅을 마치고 나서 테마 커스텀을 위한 코드를 베껴썼더니 에러가 떴다. 확인해보니 그새 less-loader 버전이 올라갔는지, jsEnabled를 쓸수가 없단다. loader 버전을 antd에서 명시하는 것으로 낮추면 되지만, 공용 커스텀 컴포넌트가 antd를 바탕으로 빌드업 하면서 버저닝 문제를 자주 보고 있으니 괜히 로더 버전도 낮추고 싶지 않아서.

찾아보았다네. 이게 훨씬 쉽다네.

1. less를 글로벌로 설치한다.

npm i -g less

2. antd.less 파일을 불러오기 쉽도록 적진으로 들어가서 커스텀 코드를 작성할 less 파일을 생성한다.

//terminal
 
cd node_modules/antd/dist
touch my_custom.less

3. 원본을 import 한 후 커스텀한다.

//my_custom.less
@import "./antd.less"
//커스텀하자
@primary-color: tomato;

4. 원하는 경로와 파일 이름을 정하고 css로 추출한다.

//terminal
lessc --js my_custom.less ../../../src/style/my_custom.css

5. antd.css 대신 custom.css 를 import 하세요.

//App.tsx
import './style/my_custom.css'

끝