next.js에 antd 스타일 접목하기

next.js에서는 antd의 스타일이 적용되지 않는다면?

일반적으로 CRA를 깔아서 사용할 때는 antd의 스타일이 알아서 적용이 되었지만 next에서는 해당 라이브러리를 깔아도 스타일이 적용되지 않는 문제점이 있었습니다.

해당 스타일을 적용하는 방법을 찾고 해결한 것을 기록하고자 합니다.

1. 먼저 sass를 설치하자

npm i sass

기존에는 less 도 설치하여 연동하였다고 하지만 sass 버전이 높아지면서 해당 사항은 기본적으로 지원하게 되어 less를 굳이 설치하지 않아도 되는것으로 알게 되었습니다.

2. 가장 상위 부분에서 antd를 import

해당 프로젝트에서 가장 상위부분에서 antd.css를 import를 해줘서 적용시킵니다.

import 'antd/dist/antd.css';

결과

import를 해주고 해당 antd 컴포넌트를 불러오게 되면 기존 CRA와 동일하게 antd를 사용할 수 있게 됩니다.